相关疑难解决方法(0)

填充水动画

我试图通过一个擦拭动画来制作一个看起来像是充满水的圆圈.我遇到了两个错误,甚至无法解决第三个错误:

  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 …
Run Code Online (Sandbox Code Playgroud)

css svg css3 css-animations css-shapes

59
推荐指数
4
解决办法
2万
查看次数

标签 统计

css ×1

css-animations ×1

css-shapes ×1

css3 ×1

svg ×1