css3实现水波浪效果

CSS3是前端开发中必不可少的一部分，其中水波浪效果是一个很酷的效果，可以用于网站背景、动画等。下面我们就来看看如何使用CSS3来实现水波浪效果。

.wave {
  position: relative;
  width: 100%;
  height: 100px;
  background-color: #ccc;
}

.wave:before {
  content: "";
  display: block;
  position: absolute;
  bottom:0;
  right:0;
  left:0;
  height: 20%;
  background-color: #fff;
  border-radius: 50%
}

.wave:after {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  height: 20%;
  background-color: #fff;
  border-radius: 50%;
  animation: animateWave 0.5s ease-in-out infinite;
  animation-delay: -0.25s;
}

@keyframes animateWave {
  0% {
    transform: translateX(0) translateY(-5px);
  }
  50% {
    transform: translateX(-15px) translateY(5px);
  }
  100% {
    transform: translateX(0) translateY(-5px);
  }
}

代码中，我们先定义了一个类名为wave的div，然后使用伪元素before和after分别实现水波浪的上下两部分，其中before元素是一个纯色的圆形，after元素则使用了CSS3的动画来实现水波浪的动态效果。

通过这段代码，我们就可以实现一个酷炫的水波浪效果啦！