“文字高亮闪烁”本质是利用 background-clip: text 配合线性渐变背景与 background-position 动画位移实现的视觉错觉，通过 -100% 到 200% 的横向滑动营造光斑扫过效果，需 color: transparent、display: inline-block 等前提，且 iOS 节奏约 0.6s 单次触发。
什么是“文字高亮闪烁”效果的本质
这不是真正的“高光”，而是用 background-clip: text 配合渐变背景 + 动画位移实现的视觉错觉。核心是让一个线性渐变从左到右扫过文字，只在文字轮廓内显示，形成光斑滑过的效果。iOS 系统级动效里这个动画节奏偏快、持续时间短（约 0.6s），且通常只触发一次（比如解锁界面文字“滑动以解锁”）。
background-clip: text 的兼容性与前置条件
该属性必须配合 color: transparent 才生效，否则文字颜色会覆盖背景。它在 Safari（包括 iOS）、Chrome 70+、Edge 79+ 支持良好，但 Firefox 默认禁用（需开启 layout.css.background-clip-text.enabled 标志，生产环境不可依赖）。所以实际项目中建议加降级：color 设为默认灰阶文字色，再用 @supports 包裹高亮逻辑。
- 必须设置
display: inline-block或inline元素（如<span>）才能正确裁剪背景 - 不能用在伪元素
::before/::after上（Firefox/Safari 均不支持） - 若父容器有
transform或filter，可能触发层叠上下文，导致裁剪失效
关键动画：用 background-position 控制光斑移动
渐变背景本身不动，靠改变 background-position 让“可见窗口”横向滑动。起点设为 -100%（光斑完全在左外），终点设为 200%（光斑完全滑出右外），这样能保证光斑宽度始终覆盖文字全宽，避免两端漏光或卡顿。
@keyframes shine {
0% { background-position: -100% 0; }
100% { background-position: 200% 0; }
}
- 动画时长建议
0.5s ~ 0.7s，太快像闪，太慢失去“瞬时提示”感 - 使用
linear缓动，避免ease导致中间段拖沓 - 不要用
infinite—— iPhone 解锁文字只闪一次，重复闪烁会干扰用户注意力
完整可运行示例与易错点
下面这段代码直接复制进 HTML 就能跑，但注意两个坑：background-image 的渐变必须写成单行（换行会被解析为无效值），且 background-size 必须显式设为 300% 100%（否则默认 100% 100%，光斑宽度等于文字宽，动画会卡在边缘）。
立即学习“前端免费学习笔记（深入）”；
.shine-text {
color: transparent;
background-image: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 50%, rgba(255,255,255,0) 100%);
background-size: 300% 100%;
background-repeat: no-repeat;
background-position: -100% 0;
-webkit-background-clip: text;
background-clip: text;
animation: shine 0.6s linear forwards;
}
- 如果文字没显示高亮，先检查是否漏了
color: transparent - 如果光斑不动，大概率是
background-size没设够（至少要 200%，推荐 300%） - 如果在 iOS Safari 上失效，确认没意外触发了
will-change: transform或其他合成层干扰
真正难的是让这个效果和系统级交互节奏对齐——比如只在用户手指按下时触发，而不是页面加载就闪。那得结合 touchstart / pointerdown 事件动态添加 class，这点容易被忽略，但恰恰是接近原生体验的关键。
