box-shadow 比 transform 更适合实现单粒子爆炸轨迹，因其无需重排即可用多层偏移+渐隐光晕模拟三维飞散衰减效果，单元素配合动态 box-shadow 属性即可完成，性能与维护性更优。
box-shadow 实现单个粒子的“爆炸轨迹”为什么比 transform 更合适
因为 box-shadow 可以在不触发重排（reflow）的前提下，用纯 CSS 模拟出多层、偏移、渐隐的光晕效果，而 transform: translate() 配合 opacity 动画虽然也能动，但要模拟“炸开+弥散+消散”的视觉层次，得堆多个元素或伪元素——性能和维护成本立刻上升。
关键点在于：一个 div 元素 + 一组带不同 offset 和 blur 的 box-shadow 值，配合 @keyframes 动态改变它们，就能让单个粒子看起来像在三维空间中飞散并衰减。
- 每个
box-shadow条目格式为：h-offset v-offset blur-radius spread-radius color - 动画中重点调的是
h-offset和v-offset（控制方向与距离），以及blur-radius（控制虚化/衰减感） - 别忘了给
color加上透明度，比如rgba(255, 100, 50, 0.8)，否则 fade-out 会生硬
用多个 keyframes 分阶段控制爆炸节奏：起爆 → 飞散 → 消散
一个 keyframe 动画撑不起烟花的物理感。必须拆成至少三段：0% 是收缩聚集态（可选），30% 是最大位移（模拟初速度），70% 开始模糊扩大+透明度下降，100% 完全透明且模糊到不可见。
示例节选（红色粒子）：
立即学习“前端免费学习笔记（深入）”；
@keyframes explode-red {
0% {
box-shadow:
0 0 0 0 rgba(255, 80, 60, 0.9);
}
30% {
box-shadow:
-40px -40px 20px 5px rgba(255, 80, 60, 0.8),
40px -40px 20px 5px rgba(255, 80, 60, 0.8),
-40px 40px 20px 5px rgba(255, 80, 60, 0.8),
40px 40px 20px 5px rgba(255, 80, 60, 0.8);
}
70% {
box-shadow:
-80px -80px 40px 0 rgba(255, 80, 60, 0.4),
80px -80px 40px 0 rgba(255, 80, 60, 0.4),
-80px 80px 40px 0 rgba(255, 80, 60, 0.4),
80px 80px 40px 0 rgba(255, 80, 60, 0.4);
}
100% {
box-shadow:
-120px -120px 60px 0 rgba(255, 80, 60, 0),
120px -120px 60px 0 rgba(255, 80, 60, 0),
-120px 120px 60px 0 rgba(255, 80, 60, 0),
120px 120px 60px 0 rgba(255, 80, 60, 0);
}
}
- 注意：所有
box-shadow条目必须在每一帧中数量一致，否则动画会跳变 - 位移值（如
-80px）建议用偶数，避免 subpixel 渲染导致的模糊抖动 - 不要在
0%就写满 4 个 shadow——从 1 个开始过渡更自然（比如先只有中心光斑）
批量生成粒子时，如何避免 DOM 膨胀和样式冲突
每炸一次就 document.createElement('div') 十几个节点？浏览器扛不住。正确做法是复用固定池（比如 50 个 div），每次爆炸只重置它们的 style.left/top 和 animation 名称，再 offsetParent = null 触发回流重播动画。
- 给每个粒子加唯一 class，例如
particle particle--red，对应不同@keyframes - 用
animation-fill-mode: forwards确保结束帧保留，方便下一次 reset - 动画时长统一设为
0.6s左右，太长显得拖沓，太短看不出爆炸层次 - 务必加
animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1)，模拟初快后慢的惯性衰减
移动端真机上 box-shadow 粒子卡顿？这些细节决定成败
iOS Safari 和部分安卓 WebView 对大量 box-shadow 计算很敏感，尤其当 blur 半径 >30px 或条目 >6 个时，帧率骤降。不是代码逻辑错，是渲染管线过载。
- 实测安全上限：单粒子最多 4–5 个
box-shadow，blur 不超过 40px，总动画时长 ≤0.7s - 用
will-change: transform没用——box-shadow不走合成层；真正有效的是加transform: translateZ(0)强制 GPU 加速（但慎用，可能引发文字锯齿） - 更稳的方案：检测
matchMedia('(prefers-reduced-motion)')或 UA，降级为单色淡出动画
粒子效果越炫，越依赖对渲染路径的诚实判断。别把 box-shadow 当万能胶水，它本质是逐像素高斯模糊——量大了，GPU 就会默默给你脸色看。
