纯CSS烟花放射效果需用多个绝对定位粒子元素，各自配置不同方向的translate与scale动画并错开延迟，配合快起快停的cubic-bezier定时函数实现爆发感。
怎么用 CSS 实现烟花爆炸的放射效果
纯 CSS 能做，但得放弃“一串粒子自动飞散”的幻想——CSS 没有随机方向或物理引擎，所谓“放射”本质是预先定义好若干 transform: scale() translate() 动画，靠多个子元素各自播放不同偏移的副本。
核心思路：一个容器（烟花中心）+ 若干 .particle 子元素（每颗火星），每个 .particle 用 animation 控制缩放 + 径向位移，再用 animation-delay 错开出发时间，视觉上就“炸开了”。
为什么必须用多个子元素，不能只 animating 一个 div
单个元素只能走一条 transform 路径，没法同时往八个方向飞。CSS 动画不支持运行时生成方向向量，所以必须硬写多个粒子，每个配独立动画。
-
.particle:nth-child(1)→translate(20px, -20px) -
.particle:nth-child(2)→translate(-20px, -20px) - ……至少 8–12 个才能有基本放射感
- 少于 6 个会明显看出“稀疏”“假”，尤其在小尺寸下
CSS 动画参数怎么设才像“炸开”而不是“弹跳”
关键在 timing-function 和 transform 组合：要快起快停，中间几乎不匀速；位移值得够大，缩放得从 0 爆到 1.2 再回 0.8（模拟火星迸溅后微滞）。
立即学习“前端免费学习笔记（深入）”；
- 推荐
animation-timing-function: cubic-bezier(0.17, 0.67, 0.83, 0.67)—— 比ease-out更陡，开头猛冲，结尾刹得住 -
transform: scale(0) translate(0, 0)→scale(1.2) translate(40px, -40px)→scale(0.8)，三帧足够 - 总时长控制在
0.5s–0.7s，太长像慢动作，太短看不出散开 - 别用
opacity控制淡入淡出——人眼对亮度变化比位置更敏感，容易抢戏
实际写的时候最容易漏掉的三件事
不是写完动画就完事。浏览器渲染、DOM 结构、触发时机全得卡准，否则要么不动，要么闪一下就没了。
- 必须给每个
.particle加position: absolute，且父容器position: relative，否则translate会相对整个页面偏移 - 动画触发前，所有
.particle得初始隐藏：opacity: 0; transform: scale(0);，否则页面加载时会先“堆在中心”再炸 - 动画播完要重置状态，否则第二次点击没反应：
animation-fill-mode: forwards不够，得用 JS 在animationend后清空 class 或重置style - 移动端注意：iOS Safari 对大量
transform+animation并发支持弱，超过 15 个粒子可能掉帧
真要加随机角度或更多物理感，CSS 就该让位给 Canvas 或 GSAP。这里只是把“能跑通、看起来像”的最小闭环说清楚。
