我试图擦拭动画,使一个圆看起来像它充满了水。我遇到了两个错误,甚至无法解决第三个问题:
>它填补了错误的方式
>它填满后重置为空(黑色)*
>现在,我使用< 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,1)),color-stop(0.25,color-stop(0.27,0)),color-stop(0.80,color-stop(1.00,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建议,不会重置它黑色了。
解决方法
@H_301_17@ 这可以用一个div和一个::before
pseudo element:来实现
> #banner给出了border-radius:50%来创建一个圆和overflow:hidden来剪切它的孩子
> :: before伪元素被动画化为100%高度,动画使用the forwards
value以100%暂停。它从底部开始,使用底部:0
>背景图片将应用于#banner和#banner ::之前的黑色和蓝色背景
兼容性:IE10和所有现代浏览器。 -webkit-前缀属性很可能不再是关键帧动画所必需的。 Check the browser compatibility chart over here on caniuse.com
工作示例
我添加了立方贝塞尔曲线(.2,.6,.8,.4)which is explained in @ChrisSpittles answer.它提供了一个整洁的效果!
#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>