每2秒对按钮产生什么影响？

Question

我想在悬停在按钮上时执行此效果（jsFiddle）：

这是我需要的代码的一部分，我想要的是： div上每两秒钟使用此按钮作为背景图像：

我想要像小提琴一样闪亮的效果，快速地进出，两秒钟之后，另一次猛扑等...

只能用css吗？

如果没有，用javascript，我应该怎么做呢？ 我应该间隔：

setInterval(function(){
     document.getElementById('btnDiv').classList.add('shining');
     setTimeout(function(){
          document.getElementById('btnDiv').classList.remove('shining');
    ,1000)
,2000)

我知道这种效果有点矫枉过正，不是吗？

Answer 1

由于您已经在:hover上获得了所需效果，因此只需将其转换为animation。

#element {
    animation: pulse 1s linear infinite alternate;
}

@keyframes pulse {
    from {
        /* define initial state of animation here */
    }
    to {
        /* define final state of animation here */
    }
}

使用linear infinite alternate将使脉冲在两种状态之间来回传递。根据您希望实现的效果，您可以通过分别使用40%和60%而不是from和to来获得更好的结果，以增加一点延迟在脉搏周围。

#nodelay, #delay {
  width: 100px;
  height: 100px;
  background-color: #080;
  border-radius: 50px;
}
#nodelay {
  animation: pulse 2s linear infinite alternate;
}
#delay {
  animation: pulse-delay 2s linear infinite alternate;
}

@keyframes pulse {
  from {background-color: #080}
  to {background-color: #0f0}
}
@keyframes pulse-delay {
  from, 40% {background-color: #080}
  60%, to {background-color: #0f0}
}

<div id="nodelay"></div>
<div id="delay"></div>