[分享]css3实现波浪动画

CSS3实现波浪动画已经成为前端开发的一个常见需求，本文将介绍如何使用CSS3实现波浪动画效果。

.wave {
  position: relative;
  width: 100%;
  height: 300px;
  background-color: #fff;
  overflow: hidden;
}

.wave .wave-bg {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 50%;
  background: #fff url(/path/to/wave.png) repeat-x;
  background-size: 40px 40px;
  
  animation: wave 2s linear infinite;
}

@keyframes wave {
  0% {
    transform: translateX(0) translateY(0) translateZ(0) scaleY(1);
  }
  50% {
    transform: translateX(0) translateY(-25px) translateZ(0) scaleY(0.5);
  }
  100% {
    transform: translateX(0) translateY(0) translateZ(0) scaleY(1);
  }
} 

在上述代码中，我们首先创建了一个类名为wave的元素作为容器，在这个容器内部再创建一个类名为wave-bg的元素作为背景，并使用CSS背景属性设置背景图片为波浪图案。

background: #fff url(/path/to/wave.png) repeat-x;
background-size: 40px 40px; 

我们还需要使用CSS3动画特效，在wave-bg元素上使用animation属性，设置动画名称为wave、持续时间为2秒、速度为线性、无限循环。

animation: wave 2s linear infinite; 

接着，在CSS中定义名为wave的关键帧动画，将translateY属性的值在50%时设置为-25px，使平面的波浪状折线产生伸缩变形，从而产生波浪动画效果。

@keyframes wave {
  0% {
    transform: translateX(0) translateY(0) translateZ(0) scaleY(1);
  }
  50% {
    transform: translateX(0) translateY(-25px) translateZ(0) scaleY(0.5);
  }
  100% {
    transform: translateX(0) translateY(0) translateZ(0) scaleY(1);
  }
} 

最后，通过在html中应用wave类名，即可实现波浪动画效果。

<div class="wave">
  <div class="wave-bg"></div>
</div> 

使用CSS3实现波浪动画效果并不难，只需要简单的CSS动画与transform属性的组合，即可实现一个优美的波浪动画效果。