光泽扫过按钮（点击触发/悬停自动扫光特效源码）

效果演示（真实可交互）

第一个按钮：每点一次扫过一道光；第二个：悬停自动扫光

完整代码

HTML 结构：

<button id="ss-btn" class="ss-btn">点击触发光泽</button>
<button class="ss-btn ss-auto">悬停自动扫光</button>

CSS 核心代码：

.ss-btn { position: relative; padding: 14px 38px;
  background: #1b1f2e; color: #fff; overflow: hidden; cursor: pointer; }

/* 光泽层：斜置的光带 */
.ss-btn::after {
  content: ''; position: absolute; top: -20%; left: -70%;
  width: 40%; height: 140%;
  background: linear-gradient(105deg, transparent,
    rgba(255,255,255,.38), transparent);
  transform: translateX(0) skewX(-18deg);
  transition: transform .65s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
/* 扫过：位移 420% 保证完全穿过按钮 */
.ss-btn.ss-sweep::after,
.ss-auto:hover::after {
  transform: translateX(420%) skewX(-18deg);
}

JS 重复触发（点击重放动画）：

const btn = document.getElementById('ss-btn');
btn.addEventListener('click', () => {
  btn.classList.remove('ss-sweep');
  void btn.offsetWidth;            // 强制 reflow，重启动画
  btn.classList.add('ss-sweep');
  setTimeout(() => btn.classList.remove('ss-sweep'), 700);
});

参数说明

兼容性与性能

• 扫光核心是伪元素 + transform 过渡，兼容所有现代浏览器，IE 不支持 transform 过渡动画但静态可用
• pointer-events: none 保证光带不拦截点击事件，无障碍友好
• 过渡只动 transform，性能优秀；void btn.offsetWidth 强制 reflow 属轻量操作，仅在点击时执行一次
• 悬停自动款无需 JS；如需循环扫光，把 transition 换成 animation 并设置 infinite 即可

常见问题

Q: 点击重放为什么需要强制 reflow？ 连续点击时类名先移除再加，如果浏览器合并了两次样式变更，动画不会重新触发；void btn.offsetWidth 强制浏览器立即计算样式，确保动画重放。

Q: 扫光扫不过去怎么办？ 终点位移要大于光带宽度加按钮宽度，即 translateX(420%) 中的百分比要足够大；如果按钮特别宽，把百分比调高或改用像素值。

Q: 光带可以带品牌色而不是白色吗？ 可以，把 rgba(255,255,255,.38) 换成品牌色的半透明渐变，如 rgba(77,150,255,.45)。

Q: 如何实现来回扫的呼吸式扫光？ 把过渡改为 animation: ss-swing 1.6s ease-in-out infinite alternate，位移在 0 与 420% 之间往返即可。