[分享]css3动画特效 水位上升

CSS3动画特效的使用非常广泛，其中水位上升效果也是非常炫酷的一种效果。接下来，我们就来了解一下如何使用CSS3来实现水位上升动画特效。.water { width: 200px; height: 2...

CSS3动画特效的使用非常广泛，其中水位上升效果也是非常炫酷的一种效果。接下来，我们就来了解一下如何使用CSS3来实现水位上升动画特效。

.water {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  background-color: #F5F5F5;
  position: relative;
}

.water:before,
.water:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 100px;
  border-radius: 50%;
}

.water:before {
  background-color: #1abc9c;
  transform: skew(45deg) translate(0, 50%);
  transform-origin: bottom left;
  animation: riseWave 2s linear infinite;
}

.water:after {
  background-color: #16a085;
  transform: skew(-45deg) translate(0, 50%);
  transform-origin: bottom right;
  animation: riseWave 2s linear infinite -1s;
}

@keyframes riseWave {
  0% {
    transform: skew(45deg) translate(0, 50%);
  }
  50% {
    transform: skew(45deg) translate(0, -50%);
  }
  100% {
    transform: skew(45deg) translate(0, 50%);
  }  
} 

如上所示，我们先创建了一个名为.water的DIV容器，设置好它的宽、高和背景颜色，并设为相对定位。接下来，我们创建两个伪元素:before和:after，并对它们进行样式设置。使用transform属性调整倾斜角度，并使用translate属性将它们移到容器的左下角和右下角。

最后，在键桥里设置一个名为riseWave的动画，通过不断的旋转和位移，实现水平面不断上升的效果。为了让水波不同时起，我们对一个元素的动画加上了一段-delay。

至此，使用CSS3来实现水位上升动画特效的方法简单明了，希望本文能对读者有所帮助。