如何用CSS实现这种“突出”效果？

Question

我遇到了一个电子商务网站，我看到了这个“购买”按钮：

对于大约每5秒钟，对角线上的按钮“高亮显示”，如图所示。

如何在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>