[分享]css3图标动态上下悬浮效果

CSS3图标动态上下悬浮效果是一种非常酷炫的效果，可以让你的网站看起来更加生动活泼。这种效果可以使用CSS3动画来实现，下面是一些实现这种效果的代码。.icon { : relative; displ...

CSS3图标动态上下悬浮效果是一种非常酷炫的效果，可以让你的网站看起来更加生动活泼。这种效果可以使用CSS3动画来实现，下面是一些实现这种效果的代码。

.icon {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 50px;
  cursor: pointer; 
  -webkit-animation: bounce 1.5s infinite;
  -moz-animation: bounce 1.5s infinite;
  animation: bounce 1.5s infinite;
}

.icon:before {
  content: "";
  position: absolute;
  top: -40px;
  left: 0;
  display: block;
  width: 50px;
  height: 50px;
  background-image: url("icon.png");
  background-position: 0 0;
  -webkit-animation: float 4s ease-in-out infinite;
  -moz-animation: float 4s ease-in-out infinite;
  animation: float 4s ease-in-out infinite;
}

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

@keyframes float {
  0%, 100% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(10px);
  }
} 

使用CSS3动画来实现这种效果非常简单，你只需要在CSS中设置好关键帧，然后将动画应用到图标上面，你就可以得到一个很棒的效果了。