如何用CSS或jQuery实现按钮的斜向高亮扫过效果？

我在一个电商网站上看到了一个“Buy”按钮：

该按钮大约每5秒会像图片所示那样出现斜向高亮效果。
请问如何用CSS或更简便的jQuery实现该效果？

嘿，这个斜向高亮的按钮效果挺常见的，用纯CSS就能轻松实现，甚至不需要依赖jQuery！我给你两种方案，你可以根据项目情况选择：

纯CSS实现方案（推荐） #

这种方案性能更好，也更简洁，不需要额外的JS依赖。核心思路是给按钮加一个伪元素，用渐变制作高亮条，再通过CSS动画让它沿着斜向划过按钮，循环执行。

先看基础的HTML结构：

<button class="buy-btn">Buy</button>

对应的CSS代码：

.buy-btn {
  position: relative;
  padding: 12px 32px;
  background-color: #ff4757; /* 按钮底色可根据需求调整 */
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  overflow: hidden; /* 隐藏超出按钮的高亮条 */
  cursor: pointer;
  transition: background-color 0.2s; /* 可选：添加hover底色过渡 */
}

.buy-btn:hover {
  background-color: #ff3838; /* 可选：hover时加深底色 */
}

.buy-btn::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  /* 渐变高亮效果，透明度可调整 */
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(-30deg); /* 斜向角度，可按需修改 */
  animation: shine 5s infinite; /* 5秒循环一次，和需求匹配 */
}

@keyframes shine {
  0% {
    transform: rotate(-30deg) translateX(-100%); /* 初始位置在按钮左侧外 */
  }
  100% {
    transform: rotate(-30deg) translateX(100%); /* 移动到按钮右侧外 */
  }
}

简单解释下：

• 按钮设置position: relative，让伪元素能基于它定位
• 伪元素用超大尺寸+线性渐变做高亮条，旋转30度形成斜向效果
• 通过animation让高亮条从左到右滑动，5秒一次无限循环
• overflow: hidden确保高亮条不会跑出按钮边界

jQuery实现方案（兼容旧场景） #

如果你的项目已经依赖jQuery，或者需要兼容一些非常旧的浏览器，也可以用动态创建元素的方式实现：

HTML结构不变：

<button class="buy-btn">Buy</button>

jQuery代码：

$(document).ready(function() {
  // 给目标按钮添加高亮效果
  initShineEffect($('.buy-btn'));

  function initShineEffect(btn) {
    // 创建高亮条元素
    const $shine = $('<div class="shine"></div>');
    btn.append($shine);

    // 定义动画逻辑
    function runShine() {
      $shine.css({
        left: '-100%',
        opacity: 0.3
      }).animate({
        left: '100%',
        opacity: 0
      }, 1000, function() {
        // 动画结束后等待4秒，总周期刚好5秒
        setTimeout(runShine, 4000);
      });
    }

    // 启动第一个动画
    runShine();
  }
});

对应的CSS样式：

.buy-btn {
  position: relative;
  padding: 12px 32px;
  background-color: #ff4757;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  overflow: hidden;
  cursor: pointer;
}

.shine {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: rotate(-30deg);
}

小调整建议 #

你可以根据原网站的效果，修改这些参数：

• 渐变的透明度（比如把0.3改成0.4让高亮更明显）
• 旋转角度（比如-25deg或-35deg）
• 动画时长（调整animation里的5s或者jQuery里的1000和4000）

内容的提问来源于stack exchange，提问作者joaogdesigner