纯css流星雨通过@keyframes定义斜线位移与rotate角度，结合css变量控制每颗流星的延迟、时长和方向，并用:nth-child为多个绝对定位光点注入不同变量值实现伪随机轨迹。
用 @keyframes + position: absolute 模拟流星轨迹
纯 CSS 实现流星雨，核心是让多个“光点”沿斜线快速移动并带拖尾感。不能依赖 SVG 或 JS 控制路径，得靠 @keyframes 定义从左上到右下（或反向）的位移，配合 transform: rotate() 做角度微调，模拟倾斜划过效果。
关键点在于：每颗流星必须有独立动画时长、延迟和方向，否则会整齐划过，失去随机感。用 CSS 变量（--delay、--duration、--angle）驱动不同实例，避免写 20 个重复 @keyframes。
示例片段：
.shooting-star {
position: absolute;
width: 2px;
height: 20px;
background: linear-gradient(to bottom, #fff, transparent);
border-radius: 1px;
animation: shoot var(--duration, 1.5s) ease-out forwards;
animation-delay: var(--delay, 0s);
transform: rotate(var(--angle, -45deg));
}
@keyframes shoot {
0% {
opacity: 0;
transform: translateY(-100px) translateX(-100px) rotate(var(--angle, -45deg));
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
transform: translateY(100vh) translateX(100vw) rotate(var(--angle, -45deg));
}
}
用 :nth-child() 批量生成流星元素并注入变量
CSS 本身无法生成 DOM，所以需要 HTML 预留一批 <div class="shooting-star"></div>，再用 :nth-child(n) 为每个设置不同变量值——这是纯 CSS 方案里最可行的“伪随机”手段。
常见错误是直接在 .shooting-star 上写死 animation-delay，导致所有流星同步出发。必须拆到每个子元素：
- 用
.stars > div:nth-child(1)设置--delay: 0.3s; --duration: 1.2s; --angle: -38deg -
:nth-child(2)改成--delay: 1.7s; --duration: 2.1s; --angle: -52deg - 至少准备 15–20 个元素，否则雨感稀疏；超过 30 个需注意低端设备重绘压力
不推荐用 CSS-in-JS 或 JS 动态插入——那就不是“仅使用代码（指纯 CSS/HTML）”了。
拖尾效果靠 background 渐变 + opacity 关键帧控制
流星不是实心线条，要表现光晕衰减，单靠 border 或 box-shadow 会糊成块状。正确做法是：
- 用
background: linear-gradient()从亮白到底部透明，形成自然收束 -
opacity在动画开头和结尾强制为 0，中间保持 1，避免突兀出现/消失 - 禁用
transition，只靠@keyframes精确控制不透明度曲线
如果加 box-shadow: 0 0 6px #fff, 0 0 12px #ffcc00，能强化发光感，但会轻微增加渲染开销，移动端慎用。
兼容性与性能陷阱：IE 不支持，will-change 要谨慎
IE 完全不支持 CSS 变量和 transform 在 @keyframes 中使用变量，此方案默认放弃 IE。Chrome/Firefox/Edge 90+ 均无问题。
容易被忽略的性能点：
- 大量绝对定位元素 + 动画会触发频繁重排，务必加
will-change: transform，但只在动画开始前加（可用animation-play-state配合） - 不要给
.shooting-star设top/left初始值，改用transform: translate()移动，确保走合成层 - 若页面已有较多
position: fixed元素，流星父容器建议设contain: layout paint隔离绘制边界
真正难的不是画一颗流星，而是让 20 颗互不干扰、错峰运行、不卡顿——变量控制节奏、transform 保障图层、渐变搞定视觉，三者缺一不可。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
