纯css烟花爆炸效果通过transform+opacity动画实现：粒子用absolute定位，父容器overflow:hidden；动画时长0.8s～1.2s，timing-function用cubic-bezier(0.2,0.8,0.4,1)模拟快起慢停；借助css自定义属性传方向距离，js注入内联样式；加scale(0.8)与box-shadow+外层blur模拟远小光晕；深色背景必备；需will-change优化，移动端用touchstart触发。
用 transform + opacity 动画模拟单粒子轨迹
纯 CSS 实现烟花爆炸，本质是让一堆 div 粒子从中心点向不同方向飞散并淡出。不能靠 JS 控制每一帧，就得靠 CSS 动画的 transform: translate3d() 和 opacity 配合贝塞尔缓动来模拟抛物线感（实际是直线+缓动错觉）。关键不是“真实物理”，而是视觉节奏：快起、慢停、收尾干净。
实操建议：
- 每个粒子必须设
position: absolute，父容器overflow: hidden防溢出 - 动画时长统一设为
0.8s～1.2s，太短像闪屏，太长失爆炸感 - 用
animation-timing-function: cubic-bezier(0.2, 0.8, 0.4, 1)模拟先快后慢的减速效果（比ease-out更可控） - 避免用
top/left动画——触发重排，卡顿明显；只用transform和opacity
批量生成粒子需用 CSS 自定义属性 + @keyframes 变体
想让每颗粒子飞向不同角度和距离，又不想写 50 个 class，就得靠 CSS 自定义属性传参。现代浏览器支持在 @keyframes 中读取 var(--tx) 这类变量，但注意：它只在动画开始时计算一次，所以得配合 style 内联或 JS 注入初始值。
常见错误现象：calc(var(--tx) * 1px) 在动画中不更新，导致所有粒子飞同一方向。
实操建议：
- 用 JS 批量创建粒子元素，并为每个设置内联样式：
style="--tx: -120; --ty: -80; --dist: 140" -
@keyframes explode中写：transform: translate3d(calc(var(--tx) * 1px), calc(var(--ty) * 1px), 0) scale(0.8) - 加
scale(0.8)是为了模拟粒子飞远变小，别漏掉，否则像平面贴图 - 粒子数控制在 30～60 个，再多 CSS 动画会掉帧，尤其低端安卓机
颜色与光晕效果靠 box-shadow + filter: blur()
烟花核心是“亮+晕+色散”，CSS 里没有径向渐变粒子，只能靠多层投影叠加。单粒子用 box-shadow 做主光晕，再套一层 filter: blur(2px) 做柔边，比纯背景色更通透。
性能影响明显：blur 会触发全图重绘，所以必须限制使用范围。
实操建议：
- 粒子本身设
background: #ff5252（亮红），再加box-shadow: 0 0 12px #ff9e9e, 0 0 24px #ff5252 - 外层包裹一个
div并设filter: blur(1.2px)，而不是直接 blur 粒子——减少重绘区域 - 避免对整个烟花容器加
blur()，那等于给全部粒子做高斯模糊，GPU 压力翻倍 - 深色背景必备，
#0f0f1b类配色才能压住光晕，浅底上粒子直接发灰
兼容性与降级：Safari 15.4+ 和 Firefox 100+ 是底线
CSS 烟花动画在 Safari 上长期存在 transform 闪烁、blur() 不生效、自定义属性无法进 @keyframes 的问题。Firefox 直到 100 版才稳定支持 filter 动画。Chrome 最稳，但旧版 Android Webview（如 UC）基本不可用。
容易被忽略的地方：
- 必须加
will-change: transform, opacity到粒子元素，否则 iOS Safari 动画卡顿明显 - 降级方案不是“显示静态图”，而是用
@supports (animation-name: test)包裹整套动画规则，不支持时只留一个中心div闪一下 - 不要尝试用
clip-path做爆炸扩散——兼容性比transform差太多，且无法硬件加速 - 移动端务必监听
touchstart触发动画，而非click，避免 300ms 延迟导致“点了没反应”的错觉
真正难的不是写出第一个爆炸，而是让 5 个烟花连续放时不卡、不堆叠、不抢 DOM 资源。粒子销毁时机、animationend 的清理逻辑、内存回收——这些都在 CSS 视野之外，得靠 JS 衔接。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
