<p>实现扫光文字效果需两步：先用 background-clip: text 和 color: transparent 挖空文字，再用带透明色标的线性渐变配合 background-size 和 background-position 动画平移；须加 -webkit- 前缀保障兼容性，参数需按字号微调。</p>
background-clip: text 配合线性渐变背景移动就能扫光
核心就两步：用 background-clip: text 把文字“挖空”，再让一个带高光的 linear-gradient 背景从左到右（或任意方向）平移。不是靠动画遮罩，也不是 JS 控制，纯 CSS 就够。
常见错误是直接给文字加 background-image 却忘了设 color: transparent —— 不透明的文字会盖住背景，光效根本出不来。
-
background-clip: text必须配合color: transparent，缺一不可 - 渐变里至少要有两个色标：一个亮色（比如
#fff或hsl(0 0% 100%)），一个完全透明（transparent），否则看不出“光束”感 - 动画必须作用在
background-position上，不能动transform或left，否则会触发重排，卡顿明显
怎么写一个不卡、能循环的扫光动画
性能关键在动画属性和时长控制。用 background-position + background-size 搭配，比单纯位移更稳；循环时间建议设在 2–3 秒之间，太快像闪烁，太慢失去“扫”的节奏感。
容易踩的坑是没设 background-size —— 默认渐变宽度只有 100%，background-position 动起来就是原地闪，不是平滑扫过。
立即学习“前端免费学习笔记（深入）”；
- 渐变背景要加宽：比如
background-size: 200% 100%，这样background-position: -100% 0→0 0才能完整扫过文字 - 动画用
@keyframes控制background-position，起始设为-100% 0，结束设为100% 0，确保光从左外进入、右外离开 - 加
animation-timing-function: linear，避免缓动导致光在中间拖沓
/* 示例 */
.glow-text {
background: linear-gradient(90deg, transparent, #fff, transparent);
background-size: 200% 100%;
background-position: -100% 0;
background-clip: text;
color: transparent;
animation: shine 2.5s infinite linear;
}
@keyframes shine {
to { background-position: 100% 0; }
}移动端兼容性差？其实是 -webkit- 前缀没写全
background-clip: text 在 Safari 和旧版 Chrome 上必须带 -webkit- 前缀，而且得同时写两遍：一次带前缀，一次不带。只写标准版，iOS 上直接失效，文字变黑块。
另外，iOS 15.4 之前不支持 background-clip: text 与 background-image（比如 SVG 或图片）混用，只能用纯渐变。
- 必须写：
-webkit-background-clip: text和background-clip: text -
color: transparent也得加-webkit-text-fill-color: transparent，防止 Safari 忽略 - 别在渐变里混用
url(...)，iOS 会静默失败，连 warning 都不报
光太弱 / 太粗 / 方向不对？调这三个参数就够了
扫光效果是否“像探照灯”，取决于渐变色标的分布、角度和背景尺寸。不是换颜色就行，重点是控制高光区域的宽度和过渡陡峭度。
很多人调来调去还是糊成一片，其实是色标位置没对齐。比如想做出窄光束，就不能让两个 transparent 色标离得太远。
- 光束窄：把亮色色标收窄，例如
linear-gradient(90deg, transparent 45%, #fff 50%, transparent 55%) - 光从上往下扫：改角度为
linear-gradient(180deg, ...)，同时动画改background-position: 0 -100%→0 100% - 光太淡：提高亮色明度，或把
#fff换成hsl(0 0% 95%)，避开纯白在 OLED 屏上发灰的问题
真正难调的是不同字号下的适配——小字需要更窄的光束、更快的动画；大标题可以拉宽渐变、放慢速度。没有一劳永逸的参数，得按实际字体大小微调。
