[分享]css3怎么实现图标震动

CSS3是一种强大的前端技术，可以在网站中实现各种酷炫的效果，比如图标的震动效果。下面我们就来看一下如何使用CSS3来实现这个效果。.icon { animation: shake 0.5s infi...

CSS3是一种强大的前端技术，可以在网站中实现各种酷炫的效果，比如图标的震动效果。下面我们就来看一下如何使用CSS3来实现这个效果。

.icon {
  animation: shake 0.5s infinite;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  60% {
    transform: translateX(-10px);
  }
  80% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
} 

以上代码中，我们定义了一个.icon的类，然后为它添加了一个名为shake的动画效果，这个动画效果会让图标不断地左右晃动。具体的实现方法是通过使用@keyframes关键字来定义动画的关键帧，然后使用transform来对图标进行位移变换。

如果您想要使用这个效果，只需要将上述代码添加到您的CSS文件中，并将图标的class设置为.icon即可。您还可以根据自己的需求调整动画的时间、位移距离等参数。

总之，使用CSS3来实现图标的震动效果非常简单，只需要几行代码就能实现，而且效果非常酷炫，可以让您的网站更具吸引力。