How to Create Liquid Filing 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.

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:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>                    

    chevron_right

    
    

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 totaly depends on the designer.

  • CSS Code:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

Final solution: In this section, we will combine the above two sections into one section and achieve the liquid filling effect on text.

  • Program:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    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 Filing 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>

    chevron_right

    
    

  • Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.