粒子爆炸需用JS随机生成极坐标（角度+半径）并转为translate值，CSS动画控制终点状态，配合will-change和图层提升防卡顿，禁用filter:blur保障性能。
用 @keyframes 定义粒子飞散轨迹
粒子爆炸本质是多个元素从中心向不同方向快速位移+透明度/缩放变化，关键不是“爆炸感”，而是轨迹的随机性和时间差。直接写死每个粒子的 transform 不现实，所以用 CSS 动画统一控制，靠 JS 随机化初始状态。
常见错误是只做径向位移（比如全用 translateX(100px) translateY(100px)），结果所有粒子挤在一条斜线上。真正要的是极坐标思维：随机角度 + 随机距离。
- 动画里只定义终点状态（
opacity: 0、transform: scale(0.2)、translate()），起点由元素自身style设置 - 位移用
translate()而非left/top，避免触发重排 - 动画时长建议 300–600ms，太短像闪退，太长失去爆炸瞬时感
用 JS 动态生成粒子并注入随机样式
纯 CSS 无法生成随机数，必须靠 JS 创建粒子元素并设置内联样式。重点不是粒子数量，而是每个粒子的 transform-origin 和初始 transform 要匹配动画预期。
容易踩的坑：用 Math.random() 直接算 translateX 和 translateY，会导致粒子集中在矩形区域而非圆形扩散。正确做法是先算角度和半径。
- 角度用
Math.random() * Math.PI * 2 - 距离用
Math.random() * 80 + 50（控制最小飞散半径） - 把角度/距离转成
translateX和translateY：cos(angle) * distance和sin(angle) * distance - 每个粒子加
style.cssText = `--tx: ${tx}px; --ty: ${ty}px;`，动画里用transform: translate(var(--tx), var(--ty))
动画卡顿？检查 will-change 和图层提升
几十个粒子同时动画，Chrome 下容易掉帧，尤其在低端设备。这不是代码逻辑问题，而是渲染层没提前告知浏览器哪些属性会变。
典型现象：爆炸瞬间画面撕裂、粒子移动不连贯、后续动画延迟。根本原因是 transform 和 opacity 没触发 GPU 加速。
- 给粒子元素加
style.willChange = 'transform, opacity'（注意仅在动画前设置，结束后清除） - 确保粒子是绝对定位（
position: absolute），且父容器有transform: translateZ(0)或will-change: transform强制建新图层 - 避免在动画中读取
offsetTop等触发重排的属性，否则强制同步渲染
兼容性与性能取舍：别用 filter: blur() 做尾迹
有人想加高斯模糊模拟光晕或拖尾，但 filter: blur(2px) 在动画中是重灾区：iOS Safari 会严重掉帧，Android Chrome 内存占用翻倍，且无法硬件加速。
真实项目里，90% 的“爆炸质感”来自速度曲线和粒子大小衰减，不是视觉特效。强行加 blur 得不偿失。
- 用
animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1)模拟初快后慢的惯性感，比模糊更有效 - 粒子大小用
scale(1) → scale(0.1)，配合opacity: 1 → 0，自然形成“消散”错觉 - 如果真需要光效，用带径向渐变的伪元素叠加，而非 filter
粒子爆炸效果的复杂点不在动画本身，而在于 JS 随机逻辑和 CSS 渲染链路的咬合——角度算错一点，粒子就塌缩成扇形；will-change 忘了清，内存悄悄涨。这些地方不报错，但一上线就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
