填充水animation
我正在试图清理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(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>
给它一个默认的掩码位置@anpsmnbuild议，不会将其重置为黑色了。
这可以通过一个div和a ::before伪元素来实现：
-
#banner被赋予border-radius: 50%来创build一个圆形和overflow: hidden来将其子内部剪切 -
::before伪元素的animation高度为100％，animation使用forwards值在100％处暂停。 它从底部开始，使用bottom: 0 -
背景图像将应用于
#banner和#banner::before的黑色和蓝色背景
兼容性： IE10 +和所有现代浏览器。 对于关键帧animation， -webkit-前缀属性很可能不再需要。 在caniuse.com上查看这里的浏览器兼容性图表
工作示例
我已经添加了在@ChrisSpittles答案中解释的立方贝塞尔 cubic-bezier(.2,.6,.8,.4) 。 它提供了一个整洁的效果！
#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>
这里有四个不同的版本来补充@MisterManSam的辉煌答案 。
1.宽松
说明
如果你装满了一个充满液体的圆形碗，它的底部和顶部的填充速度要比中间的要快（因为在更宽的中间部分有更多的面积）。 所以，在这个粗略的解释中，animation需要：在中间开始快速，缓慢，然后在碗顶部再次变窄时快速完成。
要做到这一点，我们可以使用CSS3 easing函数： cubic-bezier(.2,.6,.8,.4) 。
看看下面的例子。
（ 如果你想调整宽松这里是一个很好的资源： http : //cubic-bezier.com/#.2,6,.8,.4 ）
例：
#banner { width: 150px; height: 150px; 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>
我认为这完成了你的第一个目标：
#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,0)), color-stop(0.25, rgba(0,0,0,0)), color-stop(0.27, rgba(0,0,0,0)), color-stop(0.80, rgba(0,0,0,1)), color-stop(1.00, rgba(0,0,0,1))); } @-webkit-keyframes wipe { 0% { -webkit-mask-position: 300px 300px; } 100% { -webkit-mask-position: 0 0; } }
div{ width: 200px; height: 200px; background: #ccc; border-radius: 50%; overflow: hidden; position: relative; z-index: 9; } div:before{ content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 100%; background: #00BFFF; -webkit-animation: animtop 5s forwards, animtop2 2s forwards; animation: animtop 5s forwards, animtop2 2s forwards; } @-webkit-keyframes animtop{ 0%{top: 100%;} 75%{top: 0} } @keyframes animtop{ 0%{top: 100%;} 100%{top: 25%} } @-webkit-keyframes animtop2{ 75%{top: 25%;} 100%{top: 0} } @keyframes animtop2{ 75%{top: 25%;} 100%{top: 0} }
<div></div>
