纯CSS流光文字特效需用background-clip: text将渐变背景裁剪至文字轮廓，配合text-fill-color: transparent使文字透明显色，并通过background-position动画实现扫光效果；Safari需加-webkit前缀，Firefox不支持。
流光溢出文字（即文字带动态高亮扫光效果，常用于标题或按钮）不需要 JavaScript，纯 CSS3 就能实现，核心是 background + background-clip: text + text-fill-color: transparent 配合 animation 移动线性渐变背景。但要注意：这个组合在 Safari 15.4+ 才稳定支持 background-clip: text，旧版 Safari 和 IE 完全不支持。
为什么 background-clip: text 是关键
它让背景图/渐变“裁剪”到文字轮廓内，再配合 text-fill-color: transparent 把文字本身变透明，才能让背景“透出来”成为文字颜色。没有这一步，渐变只会铺满整个块级容器，不是“贴着字形走”的流光。
常见错误现象：
• 文字没变亮、背景平铺不动 → 忘了设 text-fill-color: transparent 或漏了 -webkit-background-clip: text
• 流光卡顿或跳帧 → 动画用了 left/top 位移，应改用 background-position + transform（更利于 GPU 加速）
- 必须加
-webkit-background-clip: text前缀，Chrome/Firefox 新版已支持无前缀，但 Safari 仍强依赖-webkit- -
color属性会被text-fill-color覆盖，所以不用设color，直接设text-fill-color - 元素需是块级或行内块（
display: inline-block），否则background可能不生效
linear-gradient 的渐变方向和长度怎么配才像“扫光”
流光感来自一个窄而亮的色带快速横穿文字。推荐用 to right 方向，起始色带宽度控制在 20% 以内，其余用透明过渡。太宽会像色块覆盖，太窄则看不见。
立即学习“前端免费学习笔记（深入）”；
示例渐变定义：
background: linear-gradient( 90deg, transparent, rgba(255, 255, 255, 0.8), transparent 60% );
- 角度写
90deg或to right，确保光从左往右扫 - 中间亮区用
rgba()控制明度，避免刺眼；结尾加transparent 60%强制亮区只占前 60%，不然 Safari 可能渲染异常 - 不要用
background-size: 200% 100%来拉伸——它会让渐变重复，破坏单次扫光感；正确做法是固定大小（如200% 100%）但靠background-position动态偏移
动画参数怎么设才顺滑不闪烁
关键不是帧率，而是触发合成层和避免重排。用 background-position 动画比用 transform 移动容器更轻量，但必须搭配 will-change: background-position 或 transform: translateZ(0) 提前升层。
- 动画时长建议
2s～3s，太快看不出光效，太慢显呆滞 - 使用
ease-out或cubic-bezier(0.2, 0.8, 0.3, 1)，模拟光掠过时的加速衰减感 - 必须设
background-size: 200% 100%，然后动画background-position: -100% 0, 100% 0→ 这样亮带才能完整扫过整个文字宽度 - Firefox 下若出现闪烁，加
backface-visibility: hidden可缓解
真正难调的不是代码拼写，而是渐变 stop 位置、background-size 和 background-position 三者的数值耦合——换一个字体或字号，就得重新微调百分比。别指望一套参数适配所有场景，尤其当文字长度变化大时，流光容易在短词上“一闪而过”，在长词上“拖尾”。
