灌装水动画 [英] Filling water animation

问题描述

我想要擦除动画，使圆形看起来像它充满水。我遇到了两个错误，甚至无法解决第三个问题：

1. 它填补了错误的方式


2. 在它填充完毕后，它会重置为空（黑色）

现在，我使用< 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（线性，左下，左上，颜色停止（0.00，rgba（0,0,0,1）），颜色停止（0.25，rgba（0,0， （0,0,0,0）），色停（0.27，rgba（0,0,0,0）），色停（0.80，rgba（0,0,0,0）），色停（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％ c />

p> :: before 伪元素被动画化为100％高度，动画使用 转发值。它使用 bottom：0
c



• 底部开始使用背景图片黑色和蓝色背景的地方 #banner 和 #banner :: before

兼容性：IE10 +和所有现代浏览器。 -webkit - 前缀属性很可能不再需要您的关键帧动画。 在caniuse.com上查看浏览器兼容性图表

工作示例

我已经添加了立方贝赛尔（.2，.6，.8，.4） / code> 这在@ChrisSpittles答案中有解释。它提供了一个整洁的效果！

  #banner {width：300px; height：300px;位置：相对;背景：＃000; border-radius：50％; overflow：hidden;}＃banner :: before {content：''; position：absolute;背景：＃04ACFF;宽度：100％; bottom：0; animation：wipe 5s cubic-bezier（.2，.6，.8，.4）向前;} @ keyframes wipe {0％{height：0; } 100％{height：100％; }}  

 < div id =banner> < / div>  

I am trying to get a wipe up animation to make a circle look like it's filling with water. I've run into two errors, and haven't been able to even tackle the 3rd one:

1. It fills up the wrong way
2. It resets to empty (black) after it has filled *
3. For now, I am using the <img> tags, but I would like to move this effect to body { background-image: } and need some direction on how to do this.

What I have tried so far:

#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>

---

Giving it a default mask position as @anpsmn suggested, doesn't reset it to black anymore.

解决方案

This can be achieved with a single div and a ::before pseudo element:

• The #banner is given border-radius: 50% to create a circle and overflow: hidden to clip its children inside it

• The ::before pseudo element is animated to 100% height and the animation is paused at 100% using the forwards value. It begins at the bottom with the use of bottom: 0

• The background images would be applied in place of the black and blue backgrounds on #banner and #banner::before

Compatibility: IE10+ and all modern browsers. The -webkit- prefixed property is most likely no longer necessary for your keyframe animations. Check the browser compatibility chart over here on caniuse.com

Working Example

I have added the cubic-bezier(.2,.6,.8,.4) which is explained in @ChrisSpittles answer. It provides a neat effect!

#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>

这篇关于灌装水动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！