流光效果不能直接用 linear-gradient 硬套，需配合 background-position 位移与 animation 实现动态扫光；Bootstrap 按钮须设 background-color: transparent 并覆盖渐变，方向与位移匹配，加 will-change 提升性能，时长 2.5s～3.5s，用 ease-out 或指定贝塞尔曲线，推荐独立类 .btn-shimmer 解耦兼容 v4/v5，伪元素遮罩解决移动端闪烁，真机测试必验。
流光效果为什么不能直接用 background-image: linear-gradient 硬套？
因为单纯写死的渐变不会动，background-position 位移 + animation 才能形成“光扫过”的错觉。Bootstrap 的按钮（比如 .btn-primary）默认用 background-color，会盖掉渐变层，必须用 background-image 覆盖并设为透明底色。
- 务必把
background-color设为transparent，否则动画不可见 - 渐变方向要和动画位移方向匹配（比如从左到右扫光，就用
to right+background-position: -100% 0往右推） - Bootstrap 5 默认启用了
prefers-reduced-motion媒体查询，可能静音动画，需显式覆盖
如何让流光在 Bootstrap 按钮上平滑滚动不卡顿？
关键不是帧率，而是合成层触发和位移精度。用 transform: translateX() 替代 background-position 更高效，但按钮背景是渐变图层，所以仍得靠 background-position —— 此时必须加 will-change: background-position 提前声明变更属性。
- 动画时长建议设为
2.5s～3.5s，太短像闪，太长失去流动感 - 用
ease-out或cubic-bezier(0.3, 0.8, 0.5, 1)模拟光速掠过的真实衰减 - 避免在
:hover里重新定义整个动画，只改animation-play-state: running即可复用
兼容 Bootstrap 4 和 5 的流光按钮类怎么写？
两者对 .btn 的 padding、border-radius、font-weight 处理略有差异，但流光层可完全解耦。推荐单独定义一个修饰类如 .btn-shimmer，不侵入原有 btn 类逻辑。
.btn-shimmer {
background-color: transparent !important;
background-image: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
background-size: 200% 100%;
background-position: -100% 0;
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% { background-position: -100% 0; }
100% { background-position: 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
.btn-shimmer { animation-play-state: paused; }
}
- 加
!important是为了压过 Bootstrap 的background-color（尤其 v4 的.btn-primary） -
background-size: 200% 100%确保光带宽度足够横跨按钮全程 - v5 中若用了
data-bs-toggle等 JS 绑定，流光样式不受影响，可放心叠加
移动端点击时流光消失或闪烁怎么办？
这是 Safari 和部分安卓 WebView 对 background-position 动画的重绘 Bug，不是代码写错。根本解法是避免在 active 状态重置背景，而是用伪元素遮罩替代。
立即学习“前端免费学习笔记（深入）”；
- 不要用
.btn-shimmer:active { background-position: 0 0; }—— 这会打断动画 - 改用
::after伪元素盖一层深色半透明层，opacity动画更稳定 - 给按钮加
-webkit-tap-highlight-color: transparent防止 iOS 点击灰斑干扰光效 - 真机调试时注意关闭 “缩放文本” 等辅助功能，它们可能强制禁用 CSS 动画
流光本质是视觉欺骗，参数微调比结构更重要；同一段代码在 Chrome DevTools 里看着流畅，放到真机上可能因 GPU 上下文切换而跳帧——别只信预览，务必连真机点三次再定稿。
