核心是用transform+keyframes控制粒子位移、缩放与opacity淡出，配合预设方向、animation-delay错峰及自定义属性实现散射感；需避免top/left重排、慎用blur、控制粒子数≤30并手动清理。
用 transform + keyframes 控制粒子位移和透明度是核心
纯 CSS 实现烟花爆炸效果，本质是让一组相同形状的元素（如 ::before 或 span）从中心点向不同角度快速飞散并淡出。不能依赖 JS 计算轨迹，所以得靠预设方向 + 随机化类名或属性来模拟“散射感”。关键不是真随机，而是视觉上不重复——12–24 个粒子足够，每个配独立 @keyframes 或统一动画但用 animation-delay 和 transform: rotate() 偏移起始方向。
常见错误是只做径向位移，忘了缩放和模糊：真实烟花粒子会先微缩再爆开，末尾带轻微模糊和 opacity 归零。建议动画时长控制在 0.4s–0.6s，太慢失真，太快看不出轨迹。
- 每个粒子用
position: absolute定位在父容器中心 - 用
transform: translate(var(--tx), var(--ty)) scale(var(--s))驱动位移与缩放，避免 layout 触发 - opacity 动画必须从
1 → 0，且末帧保持visibility: hidden防止点击穿透 - 别用
top/left做位移——重绘开销高，transform才是 GPU 加速路径
用 CSS 自定义属性批量生成不同角度和距离
手动写 20 个 @keyframes 不现实。更可行的是用 CSS 自定义属性传参，配合单个通用动画：
.particle {
--angle: 0deg;
--distance: 80px;
--scale-start: 0.3;
--scale-end: 1;
animation: explode 0.5s cubic-bezier(0.2, 0.8, 0.3, 1) forwards;
}
.particle:nth-child(1) { --angle: 0deg; --distance: 90px; }
.particle:nth-child(2) { --angle: 30deg; --distance: 75px; }
/* ……依此类推 */
@keyframes explode {
0% {
opacity: 1;
transform: rotate(var(--angle)) translate(0) scale(var(--scale-start));
}
100% {
opacity: 0;
transform: rotate(var(--angle)) translate(var(--distance)) scale(var(--scale-end));
}
}注意：rotate() 只是辅助定位手段，真正位移靠 translate()；如果想更自然，可把 --distance 拆成 --dx 和 --dy 直接算好 sin/cos 值（构建时用 JS 或构建工具预计算），避免运行时 trig 函数——CSS 不支持动态三角运算。
立即学习“前端免费学习笔记（深入）”；
用 filter: blur() 模拟光晕衰减，但别全程开启
粒子飞散中段加一点模糊（blur(1px)）能强化“光斑迸发”感，但首尾帧必须为 blur(0)，否则边缘糊成一团、轨迹消失。Blur 是重量级 filter，持续启用会掉帧，尤其在低端安卓机上。
- 推荐只在动画 30%–70% 区间启用
filter: blur(1px) - 别叠加多个 filter（如同时 blur + brightness），优先用
opacity和box-shadow模拟辉光 - 若需强光效果，给粒子加
box-shadow: 0 0 12px #ff9e00, 0 0 24px #ff5500，比 filter 更轻量
触发时机和性能兜底必须手动控制
CSS 动画无法像 JS 那样监听“播放完成”，所以爆炸结束后要主动重置状态，否则粒子卡在末帧影响下一次触发。也不能依赖 animationend 事件——它不兼容所有浏览器，且多个粒子并发时难管理。
- 爆炸前确保父容器
overflow: hidden，防止粒子飞出后仍占布局空间 - 用
animation-play-state: paused初始化所有粒子，触发时改running，并在定时器（setTimeout）里清空 class 或重置style - 移动端务必加
will-change: transform, opacity到粒子元素，但仅在动画前一刻添加，结束后立刻移除，避免长期占用合成层 - 超过 30 个粒子就明显卡顿，此时该切 JS + canvas ——CSS 不是万能的，别硬撑
真正难的不是写出第一个爆炸，而是让连续几次爆炸不重叠、不卡顿、不内存泄漏。自定义属性 + 定时器清理 + 粒子复用池，这三块漏掉任何一块，动效就会在实际项目里崩掉。
