流星动画需用 transform: translate() 和 opacity 实现斜向高速位移与渐变，起点终点超出视口；拖尾用5–7层递增blur的box-shadow模拟；容器设position: relative，流星用absolute+transform移动；禁用will-change；多流星用随机animation-delay和duration控制密度与节奏。
用 animation + transform 实现流星主体移动
流星划过的核心是「斜向高速位移 + 透明度渐变」，不能只靠 left/top 动画——那样会触发重排，卡顿明显。必须用 transform: translate() 配合 opacity。
关键点在于起点和终点要超出视口：比如从左下角外（translate(-20%, 120%)）飞入，到右上角外（translate(120%, -20%)）飞出，才能形成“划过”的纵深感。
示例关键帧：
@keyframes meteor-fly {
0% {
transform: translate(-20%, 120%) rotate(-45deg);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translate(120%, -20%) rotate(-45deg);
opacity: 0;
}
}
拖尾用 box-shadow 多层叠加模拟光迹
CSS 没有原生“拖尾”属性，但可以用多层 box-shadow 模拟：越靠近主体的阴影越亮越实，越远越淡越虚，形成运动残影。别用伪元素或多个元素——性能差且难对齐。
推荐写法（单个元素内完成）：
.meteor {
box-shadow:
0 0 4px #fff,
0 0 8px #fff,
0 0 12px #ffcc00,
0 0 20px #ff9900,
0 0 30px #ff6600,
0 0 40px #ff3300,
0 0 50px #ff0000;
}
注意：
• 层数建议 5–7 层，再多浏览器渲染压力明显上升
• 每层 blur 值递增，但不要超过 60px，否则边缘糊成一团
• 颜色从白→黄→红渐变，更接近真实等离子体发光特性
避免 position: absolute 导致的布局塌陷和定位偏移
很多人把流星设为 position: absolute 后发现它“飘”了——其实是父容器没设 position: relative，导致绝对定位参照了 body，而 body 又常带默认 margin 或滚动条宽度变化。
稳妥做法：
- 包裹流星的容器必须设
position: relative且宽高明确（比如100vh×100vw） - 流星本身用
position: absolute，但 top/left 设为0，靠transform移动，不依赖坐标值 - 禁用
will-change: transform——现代 Chrome/Firefox 对它优化已足够，强行开启反而增加内存开销
批量流星要用 animation-delay 随机化 + 控制密度
单颗流星容易，但夜空需要多颗错落划过。直接复制 N 个元素 + 固定 delay 会显得机械。真正自然的效果得靠 JS 动态插入 + 随机参数，但纯 CSS 方案也能凑合：
• 给每颗流星加不同 animation-delay（如 -1s, -3.7s, -5.2s），用 SCSS 循环生成
• 限制同时活跃流星数 ≤ 3，否则 GPU 占用飙升（尤其低端笔记本）
• 每颗流星的 animation-duration 在 2s–4s 间随机，避免节奏雷同
• 禁止所有流星共用同一 @keyframes 名——浏览器可能复用渲染管线，导致同步闪烁
最容易被忽略的是：拖尾阴影的 blur 值在高缩放屏（如 Retina）下会变糊。如果项目需适配高清屏，把 box-shadow 的像素值翻倍，并加 transform: scale(0.5) 补偿尺寸，比媒体查询更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
