[分享]css3图标自动上下抖动

CSS3图标自动上下抖动效果，已经成为了Web设计的趋势。这种效果可以帮助网站吸引更多的用户关注，提高用户体验。下面我们来了解一下如何实现这个效果。.icon { display: inlineblo...

CSS3图标自动上下抖动效果，已经成为了Web设计的趋势。这种效果可以帮助网站吸引更多的用户关注，提高用户体验。下面我们来了解一下如何实现这个效果。

.icon {
  display: inline-block;
  animation: shake 2s ease-in-out infinite;
}

@keyframes shake {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0);
  }
} 

代码中，我们首先创建了一个类名为.icon的样式，然后设置了该元素为行内块元素，使它能够垂直居中。接着，我们通过animation属性来为该元素设置动画，属性值是shake，表示动画名称，2s表示动画持续时间，ease-in-out是过渡函数，infinite表示无限循环。

接下来，我们定义了一个@keyframes规则，用来定义动画的具体过程。在第0%和第100%时刻，元素不发生位移。在50%时刻，元素向上位移10像素。这样，我们就实现了图标的自动上下抖动效果。

最后，我们只需要给需要抖动的图标添加.icon类名，就能看到动画效果了。