How to create liquid filling effect on text using HTML and CSS ?
The liquid fill text animation can be done using CSS | ::before selector. We will use key frames to set height for each frame of animation. Please make sure you know about both CSS | ::before selector and CSS | @keyframes Rule before try this code.
1. Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content=
"width=device-width, initial-scale=1.0" />
<title>
How to Create Liquid Filling Effect
on Text using HTML and CSS ?
</title>
<style>
body {
margin: 0;
padding: 0;
}
h1 {
margin: 200px 0;
padding: 0;
font-size: 80px;
position: relative;
color:green;
}
h1:before {
content: "Welcome to Soltuts";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
color:white;
overflow: hidden;
animation: animate 6s infinite;
}
@keyframes animate {
0% {
height: 25%;
}
25% {
height: 50%;
}
50% {
height: 65%;
}
75% {
height: 40%;
}
100% {
height: 25%;
}
}
</style>
</head>
<body>
<center>
<h1>Welcome to Soltuts</h1>
</center>
</body>
</html>
2. Creating structure:
In this section, we will create the text where we will apply the liquid filling effect. To create structure normal HTML will be required.
HTML Code:
Design structure: Before starting the design you have to be familiar with the few concepts from CSS likeCSS | ::before selector and CSS | @keyframes Rule. Other effects are totally depends on the designer.
CSS Code:
Final solution: In this section, we will combine the above two sections into one section and achieve the liquid filling effect on text.
Example: run the program to see the result.
