灌水动画

Question

我正在尝试制作擦除动画，以使圆圈看起来像是 充满水 。我遇到了两个错误，甚至无法解决第三个错误：

1. 它填充了错误的方式
2. 填满后将重置为空（黑色） *
3. 目前，我正在使用<img>标签，但我想将此效果移到该位置，body { background-image:}并需要一些有关如何执行此操作的方向。

#banner {

  width: 300px;

  height: 300px;

  position: relative;

}

#banner div {

  position: absolute;

}

#banner div:nth-child(2) {

  -webkit-animation: wipe 6s;

  -webkit-animation-delay: 0s;

  -webkit-animation-direction: up;

  -webkit-mask-size: 300px 3000px;

  -webkit-mask-position: 300px 300px;

  -webkit-mask-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.25, rgba(0, 0, 0, 1)), color-stop(0.27, rgba(0, 0, 0, 0)), color-stop(0.80, rgba(0, 0, 0, 0)), color-stop(1.00, rgba(0, 0, 0, 0)));

}

@-webkit-keyframes wipe {

  0% {

    -webkit-mask-position: 0 0;

  }

  100% {

    -webkit-mask-position: 300px 300px;

  }

}


<div id="banner">

  <div>

    <img src="http://i.imgur.com/vklf6kK.png" />

  </div>

  <div>

    <img src="http://i.imgur.com/uszeRpk.png" />

  </div>

</div>

按照@anpsmn的建议为它提供默认的蒙版位置，不再将其重置为黑色。

Answer 1

这可以通过单个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>