How to Create Liquid Filling Effect on Text using HTML and CSS ?
Last Updated :
28 Mar, 2022
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.
The basic styling of the text can be done differently that totally depends on you how you want your text to look like. The main thing is with keyframes. For the first half percentages, we are increasing the height and for the next half, we are decreasing the height. We have used 25% as the minimum value for height. You can play around with the values of a percentage to change the minimum and maximum height and look and feel of the animation according to your needs.
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<center>
<h1>GeeksforGeeks</h1>
</center>
</body>
</html>
|
Design structure: Before starting the design you have to be familiar with the few concepts from CSS like CSS | ::before selector and CSS | @keyframes Rule. Other effects are totally depends on the designer.
CSS
<style>
body {
margin: 0;
padding: 0;
}
h1 {
margin: 200px 0;
padding: 0;
font-size: 80px;
position: relative;
color:green;
}
h1:before {
content: "GeeksforGeeks";
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>
|
Final solution: In this section, we will combine the above two sections into one section and achieve the liquid filling effect on text.
html
<!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: "GeeksforGeeks";
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>GeeksforGeeks</h1>
</center>
</body>
</html>
|
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...