灌水动画

灌水动画

这可以通过单个div和一[伪元素来实现

::before

：

• 在

  #banner

  被赋予

  border-radius: 50%

  创建一个圆圈，并

  overflow: hidden

  夹及其子里面

• 所述

  ::before

  伪元件被动画化以100％的高度，并且动画效果使用在100％暂停的

  forwards

  值。它从底部开始使用

  bottom: 0

• 背景图像将在地方上的黑色和蓝色背景的应用

  #banner

  和

  #banner::before

兼容性： IE10
+和所有现代浏览器。带

-webkit-

前缀的属性很可能不再是关键帧动画所必需的。在caniuse.com上查看浏览器兼容性表

工作实例

我添加了

cubic-bezier(.2,.6,.8,.4)

@ChrisSpittlesanswer中解释的内容。它提供了整洁的效果！

#banner {  width: 300px;  height: 300px;  position: relative;  background: #000;  border-radius: 50%;  overflow: hidden;}#banner::before {  content: '';  position: absolute;  background: #04ACFF;  width: 100%;  bottom: 0;  animation: wipe 5s cubic-bezier(.2,.6,.8,.4) forwards;}@keyframes wipe {  0% {    height: 0;  }  100% {    height: 100%;  }}<div id="banner"></div>