[分享]css3实现页面元素飘动

CSS3是网页设计中一个非常重要的程序语言，它不仅可以实现页面布局，还可以通过其丰富的动画效果为网站增添一些活力。其中之一便是页面元素的飘动效果，可以通过CSS3中的animation属性来实现，让页...

CSS3是网页设计中一个非常重要的程序语言，它不仅可以实现页面布局，还可以通过其丰富的动画效果为网站增添一些活力。其中之一便是页面元素的飘动效果，可以通过CSS3中的animation属性来实现，让页面更具有吸引力。

/*CSS3动画实现元素飘动*/
.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}

@-webkit-keyframes float {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes float {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

  50% {
    -webkit-transform: translateY(-10px);
            transform: translateY(-10px);
  }

  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

.float {
  -webkit-animation-name: float;
          animation-name: float;
} 

以上代码中，我们首先定义了一个名为“float”的类，其实现元素的飘动效果。我们使用了animation属性来定义动画，其中“float”是关键帧的名称，“0%”、“50%”、“100%”是动画的阶段，分别代表动画开始时、中间时和结束时元素的位置，“transform: translateY()”则是设置元素的Y轴偏移。在类中再加上“animated”类，可以让元素实现动画效果。

在HTML中，我们可以为相应的元素添加class属性，如下所示：

<span class="float animated">元素飘动</span> 

以上代码表示让具有“float”和“animated”两个类名的元素实现飘动效果。

综上所述，通过CSS3中的animation属性，我们可以很容易实现页面元素的飘动效果，让网页更具有活力。