Loading Text With Water Animation Using HTML & CSS
Watch Video - https://youtu.be/kBPgZYOKda4
In this post, I’ll show you how to make a ‘text filling with liquid’ effect. It can be used for preloaders, titles.
Doing this with CSS would be pretty simple, if not for one problem: to use text as a mask, we require the property
background-clip:text;
HTML Code :
<div class="loading wave">
Loading
</div>
CSS Code :
.loading {
text-transform: uppercase;
font-weight: bold;
font-size: 100pt;
text-align: center;
height: 120px;
line-height: 110px;
display: block;
}
.wave {
background-image: url(water.png);
-moz-background-clip: text;
-webkit-background-clip: text;
-o-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0px 0px rgba(255,255,255,0.06);
animation: wave-animation 1s infinite linear,
loading-animation 10s infinite linear alternate;
background-size: 200px 100px;
background-repeat: repeat-x;
opacity: 1;
}
@keyframes wave-animation {
0% {
background-position: 0 bottom;
}
100% {
background-position: 200px bottom;
}
}
@keyframes loading-animation {
0% {
background-size: 200px 0;
}
100% {
background-size: 200px 200px;
}
}
Comments
Post a Comment