眼冒金星是动画片里最经典的桥段之一：角色被撞到脑袋，头顶立刻出现一圈绕着脑袋转的小星星。这种效果看似复杂，实际上用纯CSS就能完整实现，不需要任何图片素材，也不需要引入动画库。核心思路只有两步：先用CSS绘制出若干颗星星，再让这些星星沿着一个圆形轨道公转。下面我们从结构搭建开始，一步步完成这个效果。
整体结构设计：一个容器加多个星星元素
首先搭建DOM结构。我们需要一个容器元素负责整体的定位和动画驱动，内部放置多个星星元素。为了减少HTML代码量，星星可以直接用容器加伪元素的方式生成，每颗星星对应一个标签。
<div class="stars"> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star"></span> <span class="star"></span> </div>
容器.stars使用绝对定位固定在角色头部位置，pointer-events: none保证动画不会挡住页面上的点击操作。每颗星星用clip-path裁剪出五角星形状，这是整个方案里最巧妙的点：不需要引入SVG或字体图标，一个多边形裁剪值就能画出标准五角星。
.stars {
position: absolute;
top: -60px;
left: 50%;
width: 120px;
height: 120px;
margin-left: -60px;
pointer-events: none;
animation: spin 3s linear infinite;
}
.star {
position: absolute;
top: 0;
left: 50%;
width: 20px;
height: 20px;
margin-left: -10px;
background: gold;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}这里的clip-path多边形坐标是标准五角星的十个顶点，原理是从星形中心出发，按照外圆和内圆半径交替取点。如果想要更圆润或更尖锐的星星，只需要调整这组百分比坐标即可，非常灵活。
核心动画：让星星沿圆形轨道公转
眼冒金星的精髓在于“绕圈”，而不是简单的左右晃动。实现绕圈有几种方式，最直观的是让容器整体旋转，但这样星星自身也会跟着翻转，转到下半圈时星星是倒着的，视觉效果不佳。更好的方案是：容器负责公转，星星自身做反向自转，两者抵消后星星始终头朝上。
先定义容器的公转动画，用rotate从0度转到360度，配合linear匀速缓动和infinite无限循环：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}然后为每颗星星设置反向自转。由于容器在转，星星元素也加上一个方向相反、周期相同的旋转动画，视觉上星星就保持了直立。同时利用animation-delay的负值特性，让五颗星星错开相位，均匀分布在圆轨道上。负延迟的意思是动画像是从中途开始播放，这是CSS动画里实现相位分布的常用技巧。
.star {
animation: counter-spin 3s linear infinite;
}
.star:nth-child(1) { animation-delay: 0s; }
.star:nth-child(2) { animation-delay: -0.6s; }
.star:nth-child(3) { animation-delay: -1.2s; }
.star:nth-child(4) { animation-delay: -1.8s; }
.star:nth-child(5) { animation-delay: -2.4s; }
@keyframes counter-spin {
from { transform: rotate(0deg) scale(1); }
50% { transform: rotate(-180deg) scale(1.3); }
to { transform: rotate(-360deg) scale(1); }
}注意counter-spin里还嵌入了scale的缩放变化：星星转到轨道顶点时略微放大，转到两侧时恢复，模拟出近大远小的空间感，让动画更有层次。这种把多种变换写进同一组关键帧的做法，能有效减少动画数量，性能也更友好。
细节增强：发光、闪烁与出场动画
基础绕圈效果完成后，还可以叠加两层细节让画面更生动。第一层是发光效果，用filter: drop-shadow给星星加上金色光晕，比box-shadow更适合不规则形状，因为它是沿着裁剪后的实际轮廓发光的。
.star {
filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
}第二层是透明度闪烁。真实的卡通效果里，星星往往不是匀速转圈，而是忽明忽暗地闪。给星星再加一个短周期的透明度动画，与公转动画叠加播放即可。CSS允许一个元素同时声明多个动画，用逗号分隔：
.star {
animation: counter-spin 3s linear infinite, twinkle 0.5s ease-in-out infinite alternate;
}
@keyframes twinkle {
from { opacity: 0.4; }
to { opacity: 1; }
}最后一个实用细节是整体出场动画。眼冒金星通常是撞到头的一瞬间出现，过几秒后消失。可以给容器再套一层控制显隐的动画，用animation-iteration-count限定循环次数，结束停在透明状态：
@keyframes fade-group {
0% { opacity: 0; transform: scale(0.3); }
15% { opacity: 1; transform: scale(1); }
85% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.5); }
}
.stars.show {
animation: fade-group 4s ease-in-out forwards;
}完整可运行源码
把前面的片段整合起来，下面是完整代码，直接保存为HTML文件用浏览器打开即可看到效果。页面里放了一个圆脑袋的方块模拟被撞的角色，点击按钮触发一次眼冒金星：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CSS眼冒金星动画</title>
<style>
body {
display: flex;
flex-direction: column;
align-items: center;
padding-top: 120px;
background: #222;
}
.head {
position: relative;
width: 140px;
height: 140px;
border-radius: 50%;
background: #f4a261;
}
.stars {
position: absolute;
top: -70px;
left: 50%;
width: 160px;
height: 160px;
margin-left: -80px;
pointer-events: none;
opacity: 0;
}
.stars.show {
animation: fade-group 4s ease-in-out forwards;
}
@keyframes fade-group {
0% { opacity: 0; transform: scale(0.3); }
15% { opacity: 1; transform: scale(1); }
85% { opacity: 1; transform: scale(1); }
100% { opacity: 0; transform: scale(0.5); }
}
.star {
position: absolute;
top: 0;
left: 50%;
width: 22px;
height: 22px;
margin-left: -11px;
background: gold;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.8));
animation: counter-spin 3s linear infinite, twinkle 0.5s ease-in-out infinite alternate;
}
.star:nth-child(2) { animation-delay: -0.6s, -0.1s; }
.star:nth-child(3) { animation-delay: -1.2s, -0.2s; }
.star:nth-child(4) { animation-delay: -1.8s, -0.3s; }
.star:nth-child(5) { animation-delay: -2.4s, -0.4s; }
@keyframes counter-spin {
from { transform: rotate(0deg) scale(1); }
50% { transform: rotate(-180deg) scale(1.3); }
to { transform: rotate(-360deg) scale(1); }
}
@keyframes twinkle {
from { opacity: 0.4; }
to { opacity: 1; }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<div class="head">
<div class="stars" id="stars">
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
<span class="star"></span>
</div>
</div>
<button onclick="burst()" style="margin-top:40px;padding:10px 24px;">撞一下</button>
<script>
function burst() {
var el = document.getElementById('stars');
el.classList.remove('show');
// 强制重绘，保证连续点击也能重新触发动画
void el.offsetWidth;
el.classList.add('show');
}
</script>
</body>
</html>代码里有一个小技巧值得说明：重复点击按钮时，如果动画还在播放中，直接添加class是不会重新触发的。通过void el.offsetWidth读取一次布局属性强制浏览器重绘，然后再添加class，就能让动画每次点击都从头播放。这是纯CSS动画配合交互时最常用的重置手段。
如果需要调整效果，可以关注几个关键参数：改spin的周期时间可以控制转速，撞得越晕转得越慢；改星星的width和height可以控制星星大小；增加或减少span数量并相应调整animation-delay的间隔，可以改变星星的颗数分布。把gold换成其他颜色，还能做出眼冒爱心、眼冒铜钱等变体效果，思路完全一致。