How to Create Liquid Filling Effect on Text using HTML and CSS ? - GeeksforGeeks

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 Code:
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 Code:
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. 
Program:
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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
adnanirshad158
simranarora5sos
CSS-Misc
CSS-Selectors
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
How to set space between the flexbox ?
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
Form validation using jQuery
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?