怎么用纯css做出流星划过的效果
核心就三步：画一条细长的斜线元素、用 transform: skewX() 倾斜它、再用 translateX + translateY 模拟斜向位移。别用 rotate()，那会导致整条光迹绕中心转，不是“划过”的感觉。
常见错误是直接对元素 rotate(45deg) 然后 left/top 动画——结果光迹会跟着旋转中心偏移，轨迹歪掉，而且起点终点难对齐。
- 用
position: absolute定位起点，避免影响文档流 - 宽度设成
2px或3px，高度拉到 80vh～100vh，再用skewX(-15deg)倾斜（负值往左上倾斜，符合多数流星视觉习惯） - 动画只驱动
transform: translateX() translateY()，不要动left/top，否则触发重排，掉帧 - 加
opacity动画，从 0 → 1 → 0，模拟亮起又消散的过程
为什么 skewX 比 rotate 更合适
rotate() 是绕元素中心旋转整个盒模型，位移时坐标系也跟着转了，translateX(100px) 实际走的是斜方向，但你得手动算角度和距离才能对齐预期路径；而 skewX() 只扭曲形状，不改变坐标系——translateX 还是水平移动，translateY 还是垂直移动，组合起来就是干净的斜线运动。
比如想让光迹从左下飞向右上，用 skewX(-20deg) + translateX(200px) translateY(-150px) 就能直观控制落点；换成 rotate(45deg)，同样的 translate 值会跑偏，还得额外 offset 补偿。
立即学习“前端免费学习笔记（深入）”；
动画卡顿或闪烁的几个硬坑
流星动画一卡，基本掉在渲染层。最常踩的是没开硬件加速，或者用了触发重排的属性。
- 必须加
will-change: transform或transform: translateZ(0)，强制进 GPU 图层 - 禁用
background-color动画——哪怕只是渐变色，也会让浏览器放弃合成优化 - 别给流星元素设
border或box-shadow，这些在动画中代价极高 - 如果同时跑多个流星，每个用不同
animation-delay，但别用 js 动态插入太多节点，建议复用 3～5 个.shooting-star元素循环播放 - 移动端记得加
backface-visibility: hidden，防 ios safari 闪屏
兼容性与性能取舍点
IE10+ 支持 transform 和 @keyframes，但 IE 不支持 will-change，所以老版本只能靠 transform: translateZ(0) 强提图层。Safari 15.4 之前有 skewX 动画抖动 bug，可临时换用 matrix() 替代（如 matrix(1, 0, -0.268, 1, 0, 0) ≈ skewX(-15deg)）。
真正要注意的是：别为了“更真实”加径向渐变光晕或模糊滤镜——Filter: blur() 在动画里是性能杀手，尤其在低端安卓机上直接 10fps。宁可用两层叠加：一层细线主干 + 一层极淡半透明宽线做柔边，用 opacity 控制淡入淡出就够了。
复杂点在于路径控制——所有流星都走直线太假，但 CSS 本身不支持贝塞尔曲线位移。真要弧线，要么切片多段直线模拟，要么老老实实用 SVG + motion-path（chrome 105+ / Safari 16.4+ 支持），不过那就超出纯 CSS 范畴了。