用animation+transform实现流星主体运动：起始translate(-20%,-20%)，终点translate(120%,120%)，3–5s linear动画；拖尾由4–6个伪元素错开delay、opacity与偏移模拟，禁用blur/clip-path等性能陷阱。
用 animation + transform 实现流星主体运动
流星本身不是静态光点，得让它从屏幕外飞入、斜向划过。关键不是“画一条线”，而是让一个带发光效果的元素沿路径移动——transform: translate() 配合 @keyframes 最可控，比 top/left 更高性能，也避免重排。
常见错误是直接用 position: absolute 加 left/top 百分比动画，结果在高 DPI 屏或缩放下轨迹偏移；还有的用 SVG path + stroke-dasharray 模拟拖尾，但很难同步控制流星本体和残影节奏。
- 起始位置设为
translate(-20%, -20%)（左上角外），终点设为translate(120%, 120%)（右下角外），确保完整穿过视口 - 动画时长建议 3–5s，
animation-timing-function: linear，模拟匀速飞行感；加一点cubic-bezier(0.2, 0.8, 0.4, 1)反而失真 - 给元素加
border-radius: 50%和box-shadow: 0 0 20px #fff, 0 0 40px #fff模拟光晕，别用background: radial-gradient——它在动画中容易糊边
用多重伪元素叠加生成拖尾划痕
真正的拖尾不是渐变线条，而是流星高速移动时视觉残留+大气电离的复合效果：前端亮、后端淡、略带抖动。CSS 里没法做实时粒子，但可以用多个绝对定位的伪元素（::before/::after）错开时间与透明度来模拟。
误区是只做一个伪元素加 opacity 动画，结果像拉出一根半透明面条；或者用 filter: blur() 做拖影，但模糊在 GPU 渲染下常发虚、掉帧。
立即学习“前端免费学习笔记（深入）”；
- 主元素自身不负责拖尾，只做“光点”；拖尾由 4–6 个
::before伪元素承担，每个宽度/高度递减（如width: 12px→8px→4px） - 每个伪元素的
animation-delay依次增加（-0.3s,-0.6s,-0.9s…），opacity从 0.8 降到 0.2，transform跟主元素一致但加轻微随机偏移（如translateX(2px) translateY(-1px)） - 所有伪元素用
will-change: transform, opacity提前提示浏览器优化，尤其在移动端能明显减少卡顿
用 @keyframes 控制拖尾的亮度与消散节奏
拖尾不是匀速变淡，而是前端刚出现时最亮、中段维持、末端快速衰减——这得靠关键帧精细控制，不能只依赖 opacity 线性变化。
典型翻车案例：用单个 animation 控制所有伪元素，结果亮度曲线全一样，拖尾看起来像复制粘贴出来的塑料感；或者忘了加 animation-fill-mode: backwards，导致动画开始前伪元素就占位，布局跳动。
- 为拖尾单独写一个
@keyframes fade-streak，例如：@keyframes fade-streak {<br> 0% { opacity: 0.7; filter: brightness(1.3); }<br> 50% { opacity: 0.5; filter: brightness(1.1); }<br> 100% { opacity: 0; filter: brightness(0.8); }<br>} - 每个伪元素的
animation属性独立设置，比如第 3 个伪元素用animation: fade-streak 2s ease-out -0.6s forwards，forwards确保结束时保持opacity: 0 - 避免在拖尾动画里用
scale或rotate——微小旋转会让拖尾看起来像在翻滚，不符合真实流星物理特性
兼容性与性能陷阱：哪些 CSS 属性必须避开
这个动画在 Safari 上最容易出问题：旧版 WebKit 对多重伪元素 + transform + opacity 的组合渲染不稳定，有时拖尾会突然消失或错位；Chrome 高刷新率屏下若没关掉 transform: scaleZ(1) 类似 hack，也可能触发 subpixel 渲染毛刺。
- 禁用
backface-visibility: hidden——它在部分 iOS 版本会导致伪元素闪烁；改用transform: translateZ(0)强制硬件加速更稳妥 - 不要用
clip-path做动态裁剪拖尾，Safari 15.4 之前不支持动画clip-path，且性能远不如 opacity 控制 - 如果页面已有大量
will-change，优先只加在流星容器上，别每个伪元素都加，否则 Chrome 会吃光 GPU 内存 - 测试时关掉系统“减少运动”偏好（macOS / iOS 的
prefers-reduced-motion），用@media (prefers-reduced-motion: reduce)给它降级为静态光点，否则用户开启该选项后动画直接崩
拖尾的真实感不取决于特效数量，而在于各层动画的时间差、透明度衰减曲线、以及是否规避了浏览器渲染管线里的那些隐性坑——调完一个参数，记得在 iPhone Safari 和 Chrome Canary 里各刷三次，看有没有残影残留或首帧卡顿。
