灌装水动画 [英] Filling water animation
问题描述
我想要擦除动画,使圆形看起来像它充满水。我遇到了两个错误,甚至无法解决第三个问题:
- 它填补了错误的方式
-
在它填充完毕后,它会重置为空(黑色)
现在,我使用
< 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> -
底部开始使用背景图片黑色和蓝色背景的地方
#banner
和#banner :: before
:: before
伪元素被动画化为100%高度,动画使用 转发
值。它使用 bottom:0 c
兼容性: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:
- It fills up the wrong way
It resets to empty (black) after it has filled*- For now, I am using the
<img>
tags, but I would like to move this effect tobody { background-image: }
and need some direction on how to do this.
#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 givenborder-radius: 50%
to create a circle andoverflow: hidden
to clip its children inside itThe
::before
pseudo element is animated to 100% height and the animation is paused at 100% using theforwards
value. It begins at the bottom with the use ofbottom: 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屋!