金属扫光按钮需用::before伪元素承载高光层，通过@keyframes动画控制background-position并启用gpu加速，避开ios safari渲染缺陷，同时适配背景色调整渐变透明度与色调。
金属扫光按钮不是靠单层渐变或加个 box-shadow 就能糊弄出来的——它需要伪元素承载高光层、精确控制 background-position 动画、硬件加速触发，且必须绕开 iOS Safari 对 background-position 的渲染缺陷。直接在 button 上写 background-image 并加 transition，90% 情况下扫光会卡顿、跳帧或根本不动。
用 ::before 伪元素做扫光层，别碰 button 本体背景
扫光本质是「一束高光掠过表面」，不是整个按钮变亮。如果把扫光逻辑塞进 button 的 background-image，多层渐变叠加后 background-position 动画在 Safari 和部分安卓 WebView 中基本失效；更糟的是，hover 时浏览器要重绘全部图层，一卡就是 60ms 起。
- 伪元素单独承载扫光：用
::before绘制线性渐变高光条，设position: absolute覆盖按钮区域 - 必须设
content: ""，否则伪元素不渲染 - 尺寸略大于按钮：比如
width: 200%; height: 100%，再配left: -50%，确保扫光能完整进出 - 初始
background-position要对齐左边缘，例如background-position: -100% 50%，否则动画一触发就跳
扫光动画必须用 @keyframes + transform 触发 GPU 加速
只靠 transition: background-position 0.6s ease-out 在中低端设备上掉帧严重，尤其滚动页面时。CSS 动画层若没启用硬件加速，iOS Safari 会降级为 CPU 渲染，扫光变成幻灯片。
- 写
@keyframes shine，关键帧只动background-position：从-100% 50%到200% 50% - 给
::before加animation: shine 0.6s ease-out forwards - 必须加
transform: translateZ(0)或will-change: background-position，强制走 GPU - 别在 hover 里同时改
box-shadow和触发动画——这两者都触发重绘，叠加即卡顿
移动端点击扫光失效？加 tap-highlight + scale 微调
iOS 点击瞬间的灰色蒙层（-webkit-tap-highlight-color）会盖住扫光效果；而且真机上 background-position 动画在 :active 状态下几乎不执行，导致按下去没反馈。
- 全局加
* { -webkit-tap-highlight-color: transparent; }，禁用点击蒙层 - :active 状态不用动高光，改用
transform: scale(0.98)模拟按压感 - 可同步微调伪元素的
background-position，比如从50% 50%改为45% 50%，模拟光源偏移 - 真机测试必做：Chrome 模拟器的 touch 事件和 iOS 实际点击行为差异极大，尤其在
will-change生效时机上
扫光颜色和模糊度必须适配背景色，不能一套参数打天下
同一套扫光在深色背景上炫酷，在浅灰背景上可能完全不可见——因为扫光依赖明暗对比，不是绝对亮度。
- 扫光渐变推荐：
linear-gradient(135deg, transparent, rgba(255,255,255,0.7), transparent)，透明度 0.7 是上限，再高就泛白失真 - 浅色背景（如
#f5f5f5）要把透明度降到0.4–0.5，否则扫光像贴了层雾 - 深色背景（如
#1a1a1a）可提高到0.65，但别用纯白，加点冷调：比如rgba(240,245,255,0.65) - 别碰
filter: blur()做扫光——它会让光晕糊边，且和background-position动画叠加后性能雪崩
扫光最难的不是写动画，而是让光“看起来是从左往右真实掠过”，这取决于伪元素尺寸、渐变角度、起始位置三者的严丝合缝；任何一层错位，光就卡在按钮中间或一闪而过。上线前务必在 iPhone SE（2022）、iPad mini（A15）、Pixel 7 三台真机上点按十次以上，看扫光是否连续、无跳帧、无蒙层遮挡。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
