只写 background-position 动画却看不到扫光，因默认 background-size 等于元素尺寸导致渐变移出视野；必须设 background-size: 200% 100% 并配合 background-position: -100% 0 → 100% 0 才能实现完整左→右扫光效果。
为什么只写 background-position 动画却看不到扫光
因为默认 background-size 等于元素尺寸，渐变刚铺满就移出视野——位移 0% → 100% 实际只是在原地“闪”一下。必须放大背景图层，给位移留出空间。常见错误是漏掉这行：background-size: 200% 100%（横向放大两倍，纵向保持）。
如果目标是左→右斜向扫光（最常用），推荐角度用 45deg 或 to right；若要更锐利的高光带，可缩窄透明区：linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.6) 50%, transparent 60%)。
-
background-size至少设为200% 100%（水平方向），150% 100%也够用，但低于120%就容易断光 - 动画起始位置建议用
background-position: -100% 0，终点用100% 0，避免百分比计算偏差导致偏移 - 别对按钮本身设
background-color，否则会盖住渐变；用深色底色应写在伪元素或父容器上
用 ::before 伪元素实现高性能扫光的关键点
直接在按钮上 animating background-position 会触发重绘，尤其在低端安卓机上卡顿明显。改用绝对定位伪元素承载渐变，配合 overflow: hidden 裁剪，性能更稳，且能自由控制光条宽度和倾斜度。
伪元素方案还能绕过文字颜色干扰问题——比如按钮里有文字时，不用操心 -webkit-text-fill-color: transparent 是否生效。
立即学习“前端免费学习笔记（深入）”；
- 伪元素
width控制光条粗细（例如40px），height: 100%确保撑满按钮高度 - 加
transform: skewX(-25deg)让光条斜切，模拟真实掠过角度；数值越大越倾斜，-15deg ~ -30deg 较自然 - 动画用
left代替background-position，从-40px移到100%，节奏更直观可控 - 必须设
z-index: 1保证伪元素压在按钮内容之上
background-position 百分比位移为什么扫光歪了
因为 background-position: 100% 0 的“100%”是相对于 background-size 计算的，不是按钮宽高。比如设了 background-size: 200% 100%，那 100% 0 实际是渐变图层右边缘对齐按钮右边缘——结果光从左中扫到右中，视觉上像“没扫全”。
更可靠的做法是：用像素值锚定起止点，或改用方向关键词。例如：
- 起始：
background-position: -100% 50%（光条左端在按钮左外侧中央） - 结束：
background-position: 200% 50%（光条右端滑到按钮右外侧中央） - 或者干脆用
background-position: left 50%→right 50%，语义清晰且不受 size 影响
文字按钮扫光和块级按钮扫光不能混用同一套代码
文字扫光必须走 background-clip: text 路线，而块级按钮扫光直接用背景或伪元素就行。混用会导致文字被遮、动画不触发、或 Safari 下完全失效。
文字扫光要同时满足 5 个条件才稳：
background-image: linear-gradient(...)-
background-clip: text和-webkit-background-clip: text -
color: transparent和-webkit-text-fill-color: transparent - 不能设
background-color，否则渐变被盖住 - 动画必须加在文字元素上，不能挂在父容器
斜向扫光最难调的是光带角度与文字走向的匹配——长文本用 to right 比 45deg 更均匀，避免首尾高光过强、中间发灰。
