Skip to content
Related Articles

Related Articles

Improve Article
How to Create Liquid Filing Effect on Text using HTML and CSS ?
  • Last Updated : 15 Apr, 2020

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:




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

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

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

  • Program:




    <!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>
  • Output:



My Personal Notes arrow_drop_up
Recommended Articles
Page :