真要实现文字闪光效果，必须用 background-clip: text + linear-gradient 动 background-position，而非 text-shadow；需设 -webkit-background-clip: text 和 color: transparent，firefox 用 mask-image 兜底。
text-shadow 动画做不了真正闪光，别白费劲
用 text-shadow 配合 @keyframes 模拟闪烁，视觉上弱、卡顿明显、无法控制光扫过方向。浏览器对大量阴影的重绘开销高，尤其文字多或字号大时，animation 帧率直接掉到 30fps 以下。真要闪光，得靠渐变 + 背景裁剪，不是“加影子”。
background-clip: text + linear-gradient 是唯一靠谱路径
核心是把文字当蒙版，让渐变色从文字里“透出来”，再动渐变位置。必须同时设 -webkit-background-clip: text 和 color: transparent，缺一不可——前者只在 WebKit 内核生效，后者确保底色不遮住渐变。
常见错误：
• 忘了加 -webkit- 前缀，Chrome/Safari 直接失效
• color 没设透明，渐变被盖住
• 用 background-image 写错语法，比如漏掉 linear-gradient(45deg, ...) 的角度参数
基础写法示例：
h1 {
background: linear-gradient(45deg, #ff0084, #3300ff, #00d4ff);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: shine 6s infinite;
}
@keyframes shine {
0% { background-position: -200%;
100% { background-position: 200%;
}
background-position 动起来才有“扫光”感
闪光不是颜色变来变去，是高光区域横向/斜向划过文字表面。所以动画必须作用于 background-position，且初始值要偏移足够远（比如 -200%），否则光效像在原地抖动。
-
background-size得设宽一点（建议400% 400%），不然光带太窄，扫过太快看不出效果 - 动画时长别低于 4s，短于 3s 就像灯泡炸裂，不是优雅闪光
- 如果文字是响应式字号，
background-size用百分比比用px更稳，避免缩放后光带错位
Firefox 不支持 background-clip: text？用 mask-image 兜底
Firefox 至今不认 background-clip: text，但支持 -webkit-mask-image（需配 -webkit-mask-clip: text）和标准 mask-image。不过 mask 方案要额外写一层伪元素或 wrapper，兼容成本略高。
最简兜底写法（仅 Firefox）：
.shine-text {
color: transparent;
background: linear-gradient(45deg, #ff0084, #3300ff, #00d4ff);
animation: shine 6s infinite;
}
@supports (mask-image: none) {
.shine-text {
-webkit-mask-image: linear-gradient(#000 0 100%);
mask-image: linear-gradient(#000 0 100%);
}
}
注意：mask 方案里 linear-gradient(#000) 是灰度遮罩，不是彩色渐变——颜色全靠 background 提供，别搞混层级。
真正在意兼容性又不想降级成纯 text-shadow 的，就老老实实双写：WebKit 走 background-clip，Firefox 走 mask-image。别指望一个属性通吃。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
