CSS对角线流光按钮需用linear-gradient(135deg, transparent, #fff, transparent)配合background-size:200% 200%和background-position:0% 0%, 100% 100%实现，推荐伪元素::before承载动画以避免干扰文字与背景，并通过animation-play-state控制悬停启停。
用 CSS 渐变 + 动画模拟对角线流光
HTML 按钮上没有原生“流光”属性，所谓对角线流光，本质是用 background-image 配合 linear-gradient 创建一条窄亮带，再通过 background-position 动画让它斜向扫过。关键不是加个 class 就完事，而是得控制好角度、尺寸和动画节奏。
常见错误是直接套用网上“45deg 流光”代码，结果光条太粗、速度太快、或只在按钮一半区域动——这是因为没匹配按钮宽高比，也没重置 background-size。
- 对角线角度必须用
linear-gradient(135deg, transparent, #fff, transparent)（135° 是左下→右上；若要右下→左上，改用315deg） -
background-size要设为200% 200%，否则动画位移会卡顿或不覆盖全区域 - 动画必须用
background-position: 0% 0%, 100% 100%配合steps(1)或ease-out，硬切会闪，匀速会假
按钮伪元素遮罩层方案更可控
直接改按钮背景容易干扰文字颜色或原有背景色，尤其按钮本身有渐变或图片时。更稳妥的做法是用 ::before 伪元素单独承载流光层，定位在按钮内部，z-index 压在文字下但盖住底色。
这个方案能避免文字发虚、背景色冲突、hover 状态错乱等问题，特别适合带 border-radius 的圆角按钮——因为伪元素可以 inherit 圆角，而背景动画在圆角裁剪下容易露边。
立即学习“前端免费学习笔记（深入）”；
- 给按钮设
position: relative，伪元素设position: absolute; top: 0; left: 0; width: 100%; height: 100% - 伪元素的
background用linear-gradient，background-clip: padding-box防止溢出内边距 - 动画 duration 控制在
1.8s到2.5s之间最自然；短于 1.2s 显急促，长于 3s 就像卡顿
适配不同尺寸按钮的关键参数
同一个动画在小图标按钮（如 32×32）和大操作按钮（如 200×60）上表现差异极大：小按钮上流光一闪就没了，大按钮上又显得拖沓。不能写死 background-position 的数值，得靠百分比 + 宽高比联动。
真正起作用的是 background-size 和动画关键帧的组合。例如：宽高比接近 1:1 的按钮，用 200% 200% + 0% 0%, 100% 100%；而细长按钮（如 180×40），应改用 300% 150% + -100% -50%, 200% 200%，让光带斜向拉伸并完整扫过。
- 测试时务必在真实设备上查看，PC 上看着正常，手机 Safari 可能因渲染策略导致闪烁
- 避免在
:hover中直接 toggle 动画，推荐用animation-play-state: paused/running控制启停 - 如果按钮有
box-shadow，伪元素需设pointer-events: none，否则会影响点击穿透
兼容性与性能取舍点
IE 完全不支持 background-position 动画，Edge 17+ 才稳定。如果必须兼容旧版 Edge，只能降级为 SVG mask + transform: translate 模拟，但体积大、维护难。
现代浏览器里，伪元素方案 FPS 更稳，但要注意：动画触发的是 background-position，属于合成层属性，只要不同时改 width 或 font-size 就不会重排。不过若按钮父容器用了 will-change: transform，反而可能引发额外图层合并开销。
- 不要给动画加
!important——它会阻止 JS 动态控制动画状态 - 移动端慎用
animation-timing-function: cubic-bezier(.2,.6,.4,1)，部分安卓 WebView 解析异常 - 流光色建议用
hsla(0,0%,100%,.2)而非rgba(255,255,255,.2)，前者在深色模式下更易保持透明度一致性
实际项目里，最常被忽略的是按钮禁用状态（disabled）下的流光处理——CSS 无法用 :disabled::before 直接控制伪元素动画，得靠 JS 切换 class 来停掉动画，否则用户会觉得“按钮明明灰了还在闪”。
