扫光按钮的本质是高光掠过而非发光，需用伪元素+渐变背景+位移动画实现：::before 绘制斜向半透明白条，配合 overflow: hidden、position: relative、background-position 动画及 135deg 渐变，移动端须用 touchstart 手动触发。
扫光按钮的本质是高光掠过，不是发光
很多人搜“扫光”却套用 text-shadow 或 box-shadow，结果做出来的是浮肿文字或硬边投影。真正扫光（glint / sweep highlight）是模拟一束光从左上到右下快速划过按钮表面的高光反射，视觉上轻、快、有方向感，和“发光”“光晕”完全不是一回事。
核心实现靠伪元素 + 渐变背景 + 位移动画：用 ::before 绘制一个窄长的半透明白色条，斜着盖在按钮上，再用 background-position 让它横向移动。
必须设 overflow: hidden 和显式尺寸
扫光条一旦超出按钮边界就会露馅——比如从左侧滑入时，白条提前在容器外显示，或者滑出右侧后还拖着尾巴。常见错误是只给按钮设 border-radius 却忘了加 overflow: hidden，导致圆角失效、高光溢出。
- 按钮容器必须设
position: relative（否则::before无法精确定位） -
::before要设display: block（默认inline不占空间，动画不触发） - 宽度建议设为
200%或更大，高度控制在15%~25%按钮高，避免遮住文字 - 初始
background-position必须对齐左边缘，例如background-position: -150% 50%，否则动画一启动就跳帧
background: linear-gradient() 的参数陷阱
扫光条不能用纯色，否则像贴纸；也不能用太宽的渐变，否则失去“光束”锐利感。典型写法是：
background: linear-gradient(135deg, transparent, rgba(255,255,255,0.8), transparent);
注意三点：
- 角度必须是
135deg（左上→右下），改成45deg就变成右上→左下，方向反了 - 中间色用
rgba(255,255,255,0.8)，透明度低于 0.6 会发灰，高于 0.9 就像泼了牛奶 -
background-size要设为200% 200%或更大，否则动画中background-position移动范围不够，光扫不到右边
移动端 touchmove 必须单独适配
扫光是悬停效果，默认只响应 :hover，在手机上完全不触发。别指望“自动 fallback”，必须手动补上触控逻辑：
- 用 JavaScript 监听按钮的
touchstart，立即添加临时 class（如is-scanning） - CSS 中写
.btn.is-scanning::before { animation: scan 1.2s ease-out; } - 动画结束后用
animationend事件移除 class，避免重复触发 - 千万别监听
document的touchmove——手指一滑就满屏扫光，体验灾难
最常被忽略的是：扫光动画本身不该带延迟，但人眼需要一点缓冲来感知“掠过”感。所以 ease-out 比 linear 更自然，而第一帧偏移量宁可少一点，也别让光条起始位置卡在按钮正中央。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
