[分享]css3怎么实现波浪效果

CSS3的特性是实现各种炫酷效果的关键。本文将介绍CSS3如何实现波浪效果，来让你的网站更加生动有趣。

.wave {
  width: 100%;
  height: 120px;
  position: relative;
  background: #fff;
}

.wave:before {
  content: "";
  display: block;
  position: absolute;
  background-color: #42a5f5;
  opacity: .5;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1;
}

.wave:after {
  content: "";
  display: block;
  position: absolute;
  background-color: #42a5f5;
  opacity: .35;
  bottom: -17%;
  left: 0;
  right: 0;
  z-index: 2;
  animation: wave 3s infinite linear;
}

@keyframes wave {
  0% {
    transform: none;
  }
  100% {
    transform: translate(-100%, 0);
  }
} 

以上代码是实现CSS3波浪效果的关键代码。首先，我们需要一个 div 容器，宽度设置为 100%，高度在120px左右即可。为了实现波浪效果，我们可以采用伪元素设置一个半透明背景色，并紧贴在容器底部；并利用另一个伪元素设置一个更淡的背景色，并将它设置位置为bottom:-17%，这样就可以形成一个以上下波浪轮廓的波浪形状。

接下来，我们需要利用CSS3中的关键帧动画，来实现波浪的运动效果。关键帧动画通过指定不同阶段的样式来控制元素的动态效果。在这个波浪效果的实现中，我们通过指定状态从初始状态运行到结束状态，然后再循环回到初始状态，来实现波浪效果的运动。

利用以上代码，我们就可以轻松地在网页中实现一个生动有趣的波浪效果了。