用 @keyframes + animation 实现可控闪烁
纯 CSS 闪烁动画的核心就两步：定义关键帧、绑定到元素。别用 text-shadow 叠太多层模拟“发光”，容易糊且难调；优先走 opacity 或 text-shadow 的明暗变化，更轻量也更易控制节奏。
常见错误是直接写 animation: blink 1s infinite; 却没定义 @keyframes blink，浏览器直接忽略动画；或者忘了加 animation-fill-mode: forwards;，导致动画结束后文字变回不透明。
-
@keyframes里至少得有两个状态（0%和100%），只写一个不会动 - 想“呼吸式”渐亮渐暗，就用
opacity: 0.4 → 1 → 0.4；想“霓虹式”强对比，就用text-shadow: 0 0 5px #fff, 0 0 10px #0ff配合opacity切换 - 避免用
animation-timing-function: step-start做闪烁——它会造成卡顿感，用ease-in-out或cubic-bezier(.2, .8, .4, 1)更自然
为什么 text-shadow 发光容易发虚或溢出
text-shadow 本质是像素级扩散，多层叠加后边缘会软化、颜色混叠，尤其在 Retina 屏或缩放页面时更明显。不是 bug，是渲染机制决定的。
真实场景中，比如按钮悬停发光、状态标签高亮，建议限制最多两层 text-shadow，并搭配 filter: blur(0.5px) 微调（慎用，部分安卓 WebView 不支持）。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
text-shadow: 0 0 2px #ff0, 0 0 4px #ff0, 0 0 8px #f0f, 0 0 12px #f0f;—— 四层叠加后色值饱和度失真，且性能下降 - 推荐写法：
text-shadow: 0 0 4px rgba(255, 255, 0, 0.7), 0 0 8px rgba(255, 0, 255, 0.5);—— 用rgba控制透明度，避免过曝 - 如果文字背景非纯黑/白，先加
background-clip: text;+-webkit-background-clip: text;再配渐变背景，比靠阴影“硬撑”发光感更稳
移动端闪烁动画卡顿？检查 will-change 和触发条件
iOS Safari 和部分安卓浏览器对频繁重绘的 text-shadow 或 opacity 动画优化较差，尤其在低电量模式下容易掉帧。这不是代码写错了，是渲染管线没被提前告知要加速。
简单加 will-change: opacity; 能让浏览器提前分配合成层，但别滥用——每个加了它的元素都会吃内存。只在真正需要动画的元素上加，且动画结束立即移除（可用 JS 控制，或用 animationend 事件）。
- 别给整个导航栏文字批量加
will-change，只加当前正在闪烁的.status-badge.is-active - 避免同时触发动画 +
transform: scale()+text-shadow—— 三者叠加极易触发重排，优先保留opacity和text-shadow - 测试时打开 Chrome DevTools → Rendering → 勾选 “Paint flashing”，看闪烁区域是否大面积红色——红得越密，重绘越重
IE11 或旧版 Edge 下闪烁失效怎么办
IE11 支持 @keyframes 和 animation，但不支持 text-shadow 的多层写法（只认第一个值），也不支持 rgba() 在 text-shadow 中的 alpha 通道。这意味着你写的发光效果在 IE 里可能只剩一层黄边，甚至完全不可见。
不是必须兼容，但如果业务强制要求，就得降级：用伪元素 ::after 叠一层半透明高亮背景，再配合 opacity 动画，绕过 text-shadow 的兼容问题。
- IE 专属写法示例：
.glow-text { position: relative; } .glow-text::after { content: attr(data-text); position: absolute; top: 0; left: 0; color: transparent; text-shadow: 0 0 6px #ff0; opacity: 0.7; animation: glow-ie 2s infinite; } - 别试图用
-ms-filter模拟发光——已废弃，且和现代动画属性冲突 - 如果项目已用 PostCSS，可配
autoprefixer+cssnano自动补@-webkit-keyframes，但 IE 仍需手动降级
最麻烦的不是怎么写动画，而是判断“哪里该闪、闪多久、闪给谁看”。运营弹窗里的闪烁提示，和后台系统状态栏里的常驻发光，对性能、可访问性、用户干扰度的要求完全不同。动效一旦嵌进业务逻辑，就不再是 CSS 能单独解决的事了。
