扫光效果需用-webkit-mask-image配合linear-gradient实现，通过移动mask-position使高亮条沿文字轮廓移动；文字须设为block或inline-block，注意webkit兼容性及firefox降级方案。
mask-image 配合 linear-gradient 实现扫光路径
扫光本质是让高亮区域沿文字移动，mask-image 控制“哪里能透出”，linear-gradient 定义透光条带的位置和方向。不能直接用 background 动画，因为文字本身不是块级背景容器——必须靠 mask 把光“切”在文字轮廓上。
- 必须给文字元素设置
-webkit-mask-image（目前仅 WebKit 内核稳定支持，Chrome/Safari 有效，Firefox 仍需mask前缀或实验性启用） - 渐变方向要匹配动画方向：比如从左到右扫光，用
linear-gradient(90deg, transparent, #000, transparent)，中间色值必须是纯黑（#000），mask 中只有非透明区域才显示内容 - 别漏掉
-webkit-mask-size和-webkit-mask-position，否则光条可能太宽或卡死不动
@keyframes 移动 mask-position 的关键帧写法
动画对象不是文字颜色，而是 mask 的位置。只动 -webkit-mask-position，且起始/结束值必须用绝对单位（如 px 或 %），百分比更安全，适配不同字号。
- 起始位置设为
-100% 0，结束设为200% 0，确保光条完整划过整个文字宽度 - 动画时长建议 1.5s–2.5s，太快像闪，太慢失去扫光感；
ease-out比linear更自然 - 别用
infinite无脑循环——连续扫光两次之间有停顿感，加animation-delay微调或改用forwards+ JS 触发更可控
文字必须是 block 或 inline-block 才能生效
mask 对 display: inline 元素行为不可靠，尤其中文文字常被折行或受父容器影响。浏览器对 inline 元素的 mask 渲染边界模糊，容易导致光条偏移或截断。
- 给文字外层加
span并设display: inline-block，或直接对h1/p等设display: block - 避免父容器有
overflow: hidden，它会裁掉 mask 动画中移出边界的光条部分 - 字体需支持清晰边缘（如
font-smoothing: antialiased），否则 mask 边缘锯齿明显
兼容性 fallback 和性能注意点
Firefox 目前不支持 -webkit-mask-image，且 mask 标准属性在各引擎实现差异大。真要全平台可用，得准备降级方案；同时 mask 动画在低端设备上可能掉帧。
- 用
@supports (-webkit-mask-image: none)包裹核心样式，不支持时回退到简单text-shadow动画 - 避免在大量文字或滚动区域频繁使用——mask 是 GPU 加速但内存开销大，单页超过 5 处易触发渲染抖动
- 别在
:hover里动态加 mask 动画，首次触发有延迟；预加载动画并设animation-play-state: paused，hover 时再play
-webkit-mask-position 手动拖一拖，看光条是否始终贴合字形——这才是最靠谱的验证方式。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
