流光效果用纯CSS实现，通过linear-gradient背景、background-size设为200% 100%、background-position初始-100% 0及@keyframes动画位移模拟高光扫过；推荐伪元素::before叠加于按钮外层容器，仅用于加载态或悬停反馈。
流光效果用 CSS 动画实现，不是靠 JS 或图片
流光（shimmer）本质是背景色块沿按钮宽度方向平移的线性动画，模拟高光扫过表面的效果。纯 CSS 就能搞定，无需 JavaScript 或额外资源文件。关键在于用 background-image 配合 background-size 和 background-position 做位移控制，再用 @keyframes 驱动。
- 不要用
box-shadow模拟——它无法形成方向性扫光，且难以控制起止位置 - 避免对整个按钮加
opacity动画——那只是淡入淡出，不是流光 - 推荐用伪元素
::before实现，避免干扰按钮文字和点击区域
按钮 HTML 结构要预留伪元素容器
直接给 <button></button> 加流光容易遮字或错位，稳妥做法是套一层 <div> 或用相对定位 + 伪元素。示例结构：
<pre class='brush:php;toolbar:false;'><div class="add-to-cart-wrapper">
<button class="btn-add-to-cart">加入购物车</button>
</div></pre>
<p>这样可以安全地把流光层叠在按钮上方，不影响可访问性和点击热区。</p>
<h3>
<code>background: linear-gradient 的角度和尺寸必须匹配按钮宽高比
流光是否“顺滑”取决于渐变方向和移动距离。常见错误是写成 to right 却没调好 background-size，导致光斑太短、闪烁或卡顿。
立即学习“前端免费学习笔记（深入）”；
- 推荐用
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent)—— 90deg 是水平方向，适合横向按钮 -
background-size设为200% 100%：确保光斑宽度是按钮两倍，动画才有足够位移空间 -
background-position初始设为-100% 0，让光斑从左外侧开始，动画结束时刚好移到右外侧 - 动画时长建议
1.5s～2s，太快像闪屏，太慢失去动感
触发时机别乱加——默认隐藏，只在加载态或悬停时显示
流光不是常驻装饰，滥用会分散用户注意力。真实场景中它只该出现在两种情况：
-
加载态：比如库存接口未返回前，按钮置灰并显示流光，表示“正在确认”，此时加
class="loading"控制显隐 -
悬停反馈：作为微交互增强，但需注意：移动端无 hover，且不能掩盖按钮文字，建议透明度控制在
0.3以内 - 绝对不要在页面一加载就自动播放——没有明确上下文时，用户会误以为按钮不可点或有 bug
复杂点在于响应式按钮宽高变化时，background-size 和 background-position 的百分比基准会变，如果按钮尺寸不固定，得用 JS 监听 resize 重设，但绝大多数电商按钮宽度固定，CSS 方案已够用。
