box-shadow模拟烟花可行但有硬伤：粒子方向固定、数量上限低（20–30个）、无法真正放射，适合轻量装饰而非物理引擎；其本质是单dom节点叠加静态投影，省资源但缺乏动态散射能力。
单个元素靠 box-shadow 模拟烟花爆炸，可行但有硬伤：粒子方向固定、数量上限低、无法真正“放射”，适合轻量装饰，别当真物理引擎用。
为什么用 box-shadow 做烟花？
它本质是“画一堆静止的影子”，不是生成新元素。浏览器只渲染一个 DOM 节点，却通过 CSS 投影叠加出数十个视觉粒子——省 DOM、免 JS、零重排，移动端帧率稳。
但这也决定了它的天花板：box-shadow 的每个投影只能设固定偏移（tx、ty）和模糊半径，没法动态算角度或随机散射。
- 最多可靠用 20–30 个投影；再多会触发浏览器渲染降级，尤其在 iOS Safari 上明显卡顿
- 所有“粒子”共用同一个
transform和opacity，不能各自独立运动 - 你写
box-shadow: 10px 10px #f00, -10px 10px #0ff，就只是两个死位置，不是“炸开”的过程
@keyframes 怎么配合 box-shadow 动起来？
关键不在让阴影“飞”，而在让整个元素动——升空 + 爆炸两段动画叠加：
- 升空阶段：用
transform: translateY()向上移动，配合cubic-bezier(0.2, 0.8, 0.3, 1)模拟初快后慢 - 爆炸瞬间：在升空终点触发
scale()+opacity动画，让元素本身“嘭”一下放大透明，同时box-shadow的模糊值（blur-radius）从 0 拉到 15px，制造光晕膨胀感 - 别试图在
@keyframes里改box-shadow的偏移值——浏览器不支持插值，只会跳变
示例节选：
.firework {
width: 4px; height: 4px;
border-radius: 50%;
position: absolute;
bottom: 0; left: 50%;
background: #ff0;
box-shadow:
0 0 8px #ff0,
6px -6px 8px #f0f,
-6px -6px 8px #0ff,
8px 0 8px #0f0;
animation:
launch 1.2s cubic-bezier(0.2, 0.8, 0.3, 1) forwards,
explode 0.5s 1.2s ease-out forwards;
}
@keyframes launch {
to { transform: translateY(-80vh); }
}
@keyframes explode {
0% { transform: scale(1); opacity: 1; }
100% { transform: scale(2.5); opacity: 0; }
}
容易被忽略的三个渲染细节
box-shadow 烟花最常翻车的地方，不在写法，而在上下文：
- 父容器必须设
overflow: hidden，否则爆炸时粒子投影溢出屏幕，iOS 下可能触发意外重绘 - 别给
.firework加will-change: transform——单元素多投影下，这反而干扰 GPU 图层合并，实测掉帧更明显 - 移动端务必加
transform: translateZ(0)强制硬件加速，但仅加在launch动画里，explode阶段去掉，避免两段动画争抢图层
真要模拟粒子四散、轨迹随机、带拖尾或碰撞反馈，box-shadow 就该让位给 Canvas 或 GSAP。它适合的是“一眼惊艳、不深究物理”的节日背景——够用，但别指望它扛住 50 个并发烟花+缩放+旋转+渐变色。”
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
