如何用CSS实现这个"highlighting"的效果？

Question

我访问了一个电子商务网站，我看到了这个 "Buy" 按钮：

大约每 5 秒，对角线上的按钮 "highlights"，如图所示。

如何在 CSS 或使用 jQuery（最简单）中实现这种效果？

Answer 1

您可以使用您制作动画的 linear-gradient：

.button {
  width: 200px;
  min-height: 50px;
  font-size: 20px;
  color: #fff;
  background-image: linear-gradient(120deg, #e70d91 0, #e70d91 50%, white 55%, #e70d91 60%);
  background-size: 220% 220%;
  background-position: 140% 0;
  background-repeat:no-repeat;
  background-color:#e70d91;
  animation:animate 5s infinite linear; 
}

@keyframes animate {
  0% {
     background-position: 140% 0;
  }
  20% {
     background-position: 0% 0; 
  }
  20.1% {
    background-position: 140% 0;
  }
  100% {
    background-position: 140% 0;
  }
}

<div class="button">
  Some text here
</div>

如何用CSS实现这个"highlighting"的效果？

How to achieve this "highlighting" effect with CSS?

css

jquery

animation

effects