box-shadow叠太多会卡顿甚至白屏，因每条阴影都需独立模糊、合成与重绘，易致GPU内存溢出或主线程阻塞；单元素建议不超过20条，爆炸效果宜用5–8层+scale动画实现。
为什么 box-shadow 叠太多会卡顿甚至白屏
因为每个 box-shadow 都是独立的渲染层，浏览器要为每一条阴影做模糊、合成、重绘。100 个阴影 ≠ 100 行代码那么简单，而是可能触发 GPU 内存爆满或主线程长时间阻塞。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 单元素上
box-shadow不建议超过 20 条；真要模拟爆炸粒子，用 5–8 层 +transform: scale()动画更稳 - 阴影数量和模糊半径
blur-radius是乘积关系：一个box-shadow: 0 0 30px 5px #f00的开销 ≈ 6 个0 0 5px 1px #f00 - 别在
:hover或动画中动态拼接大量box-shadow值——CSSOM 重排成本高，改用@keyframes预定义好关键帧
如何用纯 CSS 实现「粒子向外炸开」的错觉
核心不是“生成粒子”，而是让少量 DOM 元素（比如 1 个 <span>）通过缩放 + 阴影偏移 + 透明度变化，骗过人眼。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 粒子起点统一设为
transform: scale(0)，终点用scale(1.8)+opacity: 0，配合transform-origin: center保证从中心炸开 - 每个“粒子”用不同
animation-delay和animation-duration错开节奏，避免所有阴影同步进出造成机械感 - 阴影偏移值（
h-offset/v-offset）必须带单位（如12px），不能写成12，否则整条box-shadow失效
@keyframes 里写 50 个 box-shadow 值？别硬刚
CSS 关键帧不支持变量或循环，手写 50 行阴影不仅易错，而且无法维护。更糟的是，Chrome DevTools 在编辑器里展开这种长属性时会明显卡顿。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用构建工具（如 PostCSS 插件
postcss-box-shadow）自动生成多层阴影，或者用 JS 初始化时动态注入style标签 - 如果必须纯 CSS，把粒子拆成 3–5 组，每组用不同
class控制不同方向的偏移组合（比如.particle-north偏上，.particle-south-east偏右下） - 慎用
inset阴影参与爆炸效果——它不会“飞出去”，反而容易和外阴影打架，造成视觉粘连
移动端 Safari 上粒子一闪就消失？检查这三点
iOS Safari 对复合动画的优化策略和桌面 Chrome 完全不同，尤其对 transform + opacity + box-shadow 同时变化非常敏感。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 强制开启硬件加速：给粒子加
transform: translateZ(0)或will-change: transform, opacity（但别滥用，只加在动画元素上） - 避免在
@keyframes中同时改变box-shadow的颜色和尺寸——iOS 会丢帧；改成固定色值 + 只变blur-radius和偏移 - 动画总时长控制在 300ms–600ms，超过 800ms 在 iPhone SE 等老设备上大概率掉到 30fps 以下
真正难的不是让烟花“看起来像爆炸”，而是让 20 个粒子在低端安卓机上也保持 60fps —— 这取决于你敢不敢删掉第 7 层阴影，而不是怎么写出第 50 层。
