最靠谱的扫光效果用 CSS 线性渐变+background-position 动画实现，配合 background-clip: text（文字）或伪元素叠加（容器），需设 background-size > 100%、overflow: hidden、z-index，并统一动画帧、避免重绘以保性能。
用 CSS 渐变 + 动画模拟扫光效果最靠谱
纯 HTML 无法实现光效，必须靠 CSS；所谓“扫光”本质是用线性渐变（linear-gradient）在元素上快速平移一个高亮区域，配合 background-clip: text 或遮罩层实现“光从左到右划过”的视觉错觉。不用 JS 就能跑，性能好，兼容性也够（Chrome/Firefox/Edge 90+、Safari 15.4+）。
常见错误是直接给 background-color 加动画——没用，颜色不会“扫”，得动的是背景图层的位置。
- 用
background-image: linear-gradient(...)创建一道亮色条带（比如to right, transparent, #fff8, transparent） - 设
background-size: 200% 100%，确保亮区只占一半宽度，留出位移空间 - 用
background-position: -100% 0起始位置，再通过@keyframes移到100% 0 - 若作用于文字，加
background-clip: text和-webkit-text-fill-color: transparent（注意 Safari 需前缀）
给 div 容器加扫光：避免溢出和闪烁
大屏里常对卡片、边框、标题栏加扫光，但直接套动画容易出现光条“闪一下再动”或扫到一半消失——根本原因是没设 background-clip 范围或容器未设 overflow: hidden。
正确做法是把扫光层当伪元素叠加，不干扰原内容流：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
div.card {
position: relative;
}
div.card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
background-size: 200% 100%;
animation: shine 3s infinite;
z-index: 1;
}
@keyframes shine {
0% { background-position: -100% 0; }
100% { background-position: 100% 0; }
}
- 务必加
z-index确保伪元素在内容上方 -
background-size必须大于 100%，否则动画无位移感 - 若扫光太刺眼，调低
rgba()里的 alpha 值，别硬改亮度 - Safari 下伪元素动画偶发卡顿，可加
transform: translateZ(0)强制 GPU 加速
文字扫光慎用 background-clip: text
这个属性在 Chrome 和 Edge 上表现稳定，但在 Safari（尤其 iOS 16 之前）有严重兼容问题：文字可能全黑、不显示、或光效断续。不是 bug，是规范支持不完整。
更稳妥的替代方案是用 mask-image 配合渐变动画，但 iOS Safari 对 mask-image 的动画支持同样有限。所以实际项目中建议：
- 仅对标题类大字（字号 ≥ 32px）用
background-clip，小字放弃扫光 - 加降级：用
@supports (background-clip: text)包裹样式，否则 fallback 为普通 hover 变色 - 避免在
font-weight: 100或细体字上启用，抗锯齿会让光边糊成一片 - 动画时长别低于 2s，太快人眼跟不上，“扫”就变成“闪”
性能关键：别让扫光拖垮大屏渲染
一个大屏常有 10+ 个扫光组件，如果每个都独立动画、没做节流，CPU 占用会飙升，低端设备掉帧明显。核心原则是：复用动画、减少重绘、避开 layout 触发。
- 所有扫光统一用同一个
@keyframes shine，不要为每个模块写不同名字 - 避免在扫光层上设
box-shadow或filter: blur()，这两者强制全层重绘 - 不用
width/height动画控制光条，那会触发 layout；只动background-position或transform: translateX() - 移动端大屏建议加媒体查询：
@media (max-width: 768px) { .shine { animation: none; } }，省电且防误触
真正难的不是写出光效，而是让 20 个光效同时跑还不出卡顿——得盯着 DevTools 的 Rendering 面板看 paint 面积，删掉每一个不必要的 will-change。
