box-shadow动画无反应主因是iteration-count默认为1且timing-function过缓；需设infinite循环、steps(1)/linear函数，并联动offset/blur/color变化；流光方向效果应改用background-gradient+mask实现。
box-shadow 动画为什么没反应？检查 animation-timing-function 和 iteration-count
直接套用 @keyframes 改 box-shadow 却没闪烁，大概率是动画没真正跑起来。CSS 动画默认只执行一次（animation-iteration-count: 1），且默认缓动函数 easing 会让颜色过渡“太顺”，看不出闪烁感。
实操建议：
- 必须显式写
animation-iteration-count: infinite，否则闪一下就停 - 用
animation-timing-function: steps(1)或linear配合高对比色阶，避免渐变模糊导致“不亮” - 别只改
box-shadow的颜色——要连同offset、blur一起动，比如从0 0 0 #fff跳到0 0 15px #ff0080，才有冲击力
流光边框该用 inset 还是 outset？优先选 outset + 多层 shadow 模拟光晕
用 box-shadow: inset 做流光，光会“陷在按钮里”，看起来像内发光，不是边框流动感。真要模拟光扫过边缘，得靠多层 outset shadow 叠加位移 + 模糊变化。
常见错误：只写一层 box-shadow 动画，结果光带僵硬、无方向性。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 至少定义两层 shadow：外层大模糊（如
0 0 20px）做光晕，内层小偏移（如0 0 5px 2px）做“光边” - 在
@keyframes中让两层的color和blur-radius同步跳变，例如从透明→高亮→透明 - 示例关键帧片段：
@keyframes glow { 0% { box-shadow: 0 0 5px 2px rgba(255,0,128,0.2), 0 0 20px rgba(255,0,128,0); } 50% { box-shadow: 0 0 5px 2px #ff0080, 0 0 20px #ff0080; } 100% { box-shadow: 0 0 5px 2px rgba(255,0,128,0.2), 0 0 20px rgba(255,0,128,0); } }
移动端 Safari 不触发 box-shadow 动画？加 will-change 和 transform hack
iOS Safari 对纯 box-shadow 动画优化激进，有时直接跳过渲染，尤其在低功耗模式下。这不是 bug，是浏览器主动“省电跳帧”。
实操建议：
- 给按钮加
will-change: box-shadow，提前告知浏览器这个属性会变 - 更稳的做法：叠加一个几乎不可见的
transform: translateZ(0)，强制开启硬件加速 - 避免在
:hover里才定义动画——先在默认状态声明animation: glow 3s infinite linear，再通过animation-play-state控制启停
如何控制流光“从左到右扫过”而不是全边同步闪？用 background-gradient + mask 比 box-shadow 更可控
纯 box-shadow 只能整体明暗变化，做不到定向流动。真要实现“光带横扫”，box-shadow 不是最佳工具——它没有方向维度。
替代方案更可靠：
- 用
background: linear-gradient做一条水平光带，宽度设为2px - 配合
mask或clip-path把光带“裁”成按钮轮廓，再用animation平移background-position - 这样既能控制速度、方向、起始位置，又不会因多层 shadow 导致渲染卡顿
- 注意：
mask在 Safari 需加-webkit-mask前缀；clip-path圆角按钮用inset(0 round 8px)更安全
box-shadow 流光适合快速原型或轻量提示，但一旦需要精确节奏、方向或兼容老 iOS，就得切到 gradient + mask 方案——这点容易被忽略，等上线才发现光不动了。 
