water flow on text animation using html and css source code view below
in this animation we have to create two files this are
1.index.html
2.style.css
Index.html:
= = = = =
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Water Fill On Text | sandyapagasreenu.blogspot.com</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lexend+Deca&display=swap" rel="stylesheet">
</head>
<body>
<div class="loading wave">
sandyapagasreenu.blogspot.com
</div>
<div class="loading2 wave2">
sandyapagasreenu.blogspot.com
</div>
</body>
</html>
style.css
= = = = =
body {
background: #212121;
width: 100%;
height: 100%;
}
.loading, .loading2 {
text-transform: lowercase;
font-family: 'Lexend Deca', sans-serif;
font-weight: bold;
font-size: 60pt;
text-align: center;
height: 120px;
line-height: 110px;
vertical-align: bottom;
position: absolute;
left: 0;
right: 0;
top: 100px;
bottom: 0;
display: block;
}
.loading2 {
top: 240px;
}
.wave {
background-image: url("https://webdevtrick.com/wp-content/uploads/water-wave-blue.png");
-moz-background-clip: text;
-o-background-clip: text;
-webkit-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;
}
.wave2 {
background-image: url("https://webdevtrick.com/wp-content/uploads/water-wave.png");
-moz-background-clip: text;
-o-background-clip: text;
-webkit-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 0px;
}
100% {
background-size: 200px 200px;
}
}
@media (max-width: 765px) {
.loading, .loading2 {
font-size: 50pt;
}
}
The “water flow” text animation explained here is simple yet visually appealing. Your breakdown of the HTML and CSS makes it easy to follow. Many businesses looking to create smooth UI effects often choose to Hire Frontend Developers for results like this.
ReplyDelete