Я пытаюсь очистить анимацию, чтобы круг выглядел как , наполняющийся водой. Я столкнулся с двумя ошибками и не смог даже решить третий:
- Он не соответствует действительности.
-
Сбрасывается до пустого (черного) после того, как он заполнил* - В настоящее время я использую теги
<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>