[分享]css3按钮闪动效果

CSS3中添加了许多新特性，其中之一就是按钮闪动效果。这种效果让按钮看起来非常吸引人，能够吸引用户的注意力。接下来，就让我们一起来看看如何使用CSS3来实现这种闪动效果吧！button { backg...

CSS3中添加了许多新特性，其中之一就是按钮闪动效果。这种效果让按钮看起来非常吸引人，能够吸引用户的注意力。接下来，就让我们一起来看看如何使用CSS3来实现这种闪动效果吧！

button {
  background: #F5A623;
  color: #FFF;
  border-radius: 4px;
  font-size: 18px;
  padding: 10px 20px;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.12);
  transition: all 0.2s ease-in-out;
}
button:hover {
  background: #FFB768;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
}

button:focus {
  background: #FFB768;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
  animation: button-flash 1s infinite;
}

@keyframes button-flash {
  0% {
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.12);
  }
  50%{
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
  }
  100% {
    box-shadow: 0 4px 0 rgba(255, 255, 255, 0.8);
  }
} 

上面的代码使用了CSS3的animation属性，通过关键帧来实现按钮的闪动效果。在按钮获得焦点时，它将会闪动并且一直保持这种效果。用户只需要在页面上鼠标点击或移动到其他元素，按钮的闪动效果就会消失。

在这个例子中，我们同时使用了CSS3的box-shadow属性来为按钮添加阴影效果。通过改变这个属性的值，我们可以调整阴影的深度和颜色。

总之，使用CSS3的按钮闪动效果是一种吸引人的设计，可以让用户的注意力集中在按钮上。这项特性只需要一点点的CSS代码就能轻松实现，并且能够增强您网站的视觉效果，提高用户的体验。