流光渐变效果必须用 background-image + background-position 实现，因 background-color 会遮蔽渐变层，且 background 简写会清空原有 background-image；需设 background-color: transparent、配合 animation 位移、覆盖 prefers-reduced-motion、补全 :active/:disabled 状态并声明 will-change。
流光渐变效果不能靠单写 background: linear-gradient() 实现，必须用 background-position 位移 + animation 驱动，且按钮背景色必须设为 transparent，否则动画不可见。
为什么 background-image + background-position 是唯一可靠路径？
Bootstrap 按钮（如 .btn-primary）默认用 background-color 渲染，会完全盖住 background-image；而流光本质是“光扫过”的错觉，依赖渐变图层在水平/垂直方向持续位移。直接改 background 简写会清掉原有 background-image（比如禁用态遮罩），导致状态异常。
-
background-image: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.8), rgba(255,255,255,0))提供光带基底，方向必须与位移方向一致（例如90deg对应background-position: -100% 0往右推） -
background-color: transparent !important是硬性前提，否则整个渐变层被遮蔽 - 动画只能作用于
background-position，不能用transform替代——按钮背景是图层，不是元素本身
如何避免动画在移动端闪烁或失效？
iOS Safari 和部分安卓 WebView 在点击时会重置背景样式，同时 Bootstrap 5 默认启用 @media (prefers-reduced-motion)，可能直接禁用动画。
- 显式覆盖系统偏好：
@media (prefers-reduced-motion: reduce) { .btn-shimmer { animation-play-state: paused; } } - 加伪元素遮罩防闪烁：
.btn-shimmer::before覆盖一层半透白，opacity动画替代背景位移（仅作 fallback，非主方案） - 必须补全
:active状态的background-position声明，否则点击瞬间光效跳回起点 -
-webkit-tap-highlight-color: transparent关闭原生点击蒙层，防止它覆盖渐变层
兼容 Bootstrap 4 和 5 的类怎么写？
两者对 .btn 的 padding、border-radius 处理不同，但流光层可完全解耦——关键不在适配按钮结构，而在绕过其 CSS 权重冲突。
立即学习“前端免费学习笔记（深入）”；
- 独立类名，如
.btn-shimmer，不叠加.btn-primary等内置类 - 所有样式加
!important：Bootstrap v5 在:hover和:disabled中大量使用!important，不加就赢不了权重 - 动画时长控制在
2.5s～3.5s，贝塞尔曲线用cubic-bezier(0.3, 0.8, 0.5, 1)模拟光速衰减，太短像闪，太长失去流动感 -
will-change: background-position必须声明，否则低端设备易卡顿
最易忽略的是 :disabled 状态——很多人只写 :hover 和默认态，结果按钮禁用时流光还在动，既违和又耗资源。真机测试前务必点开禁用态看一眼。
