灌水动画

  • Z时代
  • 2024-01-10
  • 分类：问答

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

  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的建议为它提供默认的蒙版位置，不再将其重置为黑色。

回答：

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

以上是 灌水动画 的全部内容， 来源链接： utcz.com/qa/401630.html

回到顶部