扫光动效本质是视觉欺骗，需用linear-gradient配合background-size放大和background-position位移动画实现；关键在渐变方向、色值对比度与位移节奏的精准匹配。
用 background-position 动画模拟扫光，不是真反光
金属光泽扫光动效本质是视觉欺骗：没有真实光照计算，靠线性渐变叠加位移动画制造“高光划过”的错觉。关键不是加多少层渐变，而是控制好 background-image 的渐变方向、色值对比度和位移节奏。纯 background-color 无法实现，必须用 linear-gradient 配合 background-size 放大范围，否则动画会卡顿或看不见。
常见错误是直接写 background: linear-gradient(...) 然后只 animating background-position，但忘了设 background-size —— 默认大小是元素尺寸，渐变刚铺满就移出视野，根本看不到扫光过程。
-
background-size至少设为200% 200%（横向纵向都放大），让渐变区域足够宽，位移才有空间 - 渐变推荐用透明到浅白再到透明：
linear-gradient(45deg, transparent, rgba(255,255,255,0.4), transparent)，角度按需调，45° 最常用 - 动画时长建议
1.5s ~ 2.5s，太快像闪屏，太慢失去“扫”的动感
必须用 background-clip: text 才能让文字有金属扫光？
不是。文字扫光和容器扫光是两套逻辑。如果目标是按钮、卡片这类块级元素，直接在 div 或 button 上用背景动画就行；只有想让“文字本身”呈现扫光（比如 logo 文字），才需要 background-clip: text + -webkit-text-fill-color: transparent 组合。这时背景动画要挂在文字元素上，且必须加 -webkit- 前缀兼容性才稳。
容易踩的坑是：忘了关掉默认文字颜色，-webkit-text-fill-color: transparent 没生效，结果看到的是黑字叠着背景动画，扫光被盖住。
立即学习“前端免费学习笔记（深入）”；
- 文字扫光必须同时写：
background-image: linear-gradient(...)、background-clip: text、-webkit-background-clip: text、color: transparent、-webkit-text-fill-color: transparent - 渐变角度建议用
to right或to bottom，避免斜角导致文字两侧高光不均 - 不要对文字元素设
background-color，会遮挡渐变背景
@keyframes 里写 background-position: 0% 0% 到 100% 100% 为什么扫光歪了？
因为 background-position 百分比是相对于 background-size 计算的，不是元素本身。如果你设了 background-size: 200% 200%，那 100% 100% 实际对应的是渐变图层右下角移到元素右下角——这会导致扫光从左上斜穿到右下，但视觉上可能像“偏了”。真正可控的做法是用像素值或明确方向关键词。
更稳的写法是固定一个轴不动，只动另一个轴。比如水平扫光，就只改 X 轴：background-position: -100% 50% → 200% 50%，Y 轴锁在 50% 居中，避免上下浮动。
- 水平扫光推荐：
background-position: -150% 50%→250% 50%（留出缓冲，避免边缘露底） - 垂直扫光用：
background-position: 50% -150%→50% 250% - 别用
0% 0%到100% 100%，尤其当background-size≠100% 100%时，行为难预测
移动端 Safari 动画卡顿或不触发？
老版本 iOS Safari 对 background-position 动画优化差，尤其叠加多个渐变或用了 background-clip: text 时。不是代码写错，是渲染管线没走硬件加速路径。强制开启 GPU 加速能明显改善，但得用对属性。
别用 transform: translateZ(0) 去强行提 GPU —— 这对背景动画无效。真正起作用的是给元素加 will-change: background-position，或者更通用的 will-change: transform（哪怕没用 transform），前提是该元素是独立合成层。
- 加
will-change: background-position前，先确认元素已脱离文档流（如设position: relative或transform: scale(1)） - iOS 15+ 可以放心用，iOS 13–14 建议降级为单色渐变 + 更长动画时长（如
3s），避免高频重绘 - 真机调试时用 Safari 开发者工具勾选 “Show Paint Rectangles”，看是否频繁重绘整块背景
