HTML/css realizes interesting text liquid filling effect-HTML Tutorial-php.cn

HTML/css realizes interesting text liquid filling effect

藏色散人

Release： 2021-08-30 14:26:19

Original

2419 people have browsed it

In the previous article "How to use CSS to dynamically adjust the rotation radius? 》Introduces you to the effect of dynamically adjusting the rotation radius using CSS. Friends who are interested can learn about it~

This article will bring you a particularly interesting implementation effect. What do you think about the title? Do you have any ideas about the "text liquid filling effect" mentioned above?

First let’s take a look at what this effect looks like, as shown in the figure below:

GIF 2021-8-30 星期一下午 2-11-27.gif

Let’s directly upload the complete HTML/css Code:

Note: Liquid fill text animation can be done using the CSS::before selector. We'll use keyframes to set the height of each frame of animation.

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title></title>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        h1 {
            margin: 200px 0;
            padding: 0;
            font-size: 80px;
            position: relative;
            color: #45b1ff;
        }

        h1:before {
            content: "PHP中文网";
            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>PHP中文网</h1>
</center>
</body>

</html>

Copy after login

The effect of running this code is as shown in the picture above.

To achieve this effect, you need to be familiar with the :before selector and @keyframes rules in CSS.

:before selector:

:before selector inserts content before the content of the selected element. You want to use the content attribute to specify the content to be inserted.

Note: For :before in IE8 and earlier versions, you must declare

@keyframes rule:

Use @ With keyframes rules, you can create animations by gradually changing a CSS style setting to another. You can change the CSS style settings multiple times during the animation. Specify when a change occurs using %, or the keywords "from" and "to", which are the same as 0% to 100%. 0% is when the animation starts, 100% is when the animation is finished. For best browser support we should always define selectors for 0% and 100%.

Note: Use the animation attribute to control the appearance of the animation, and also use the selector to bind the animation.

PHP Chinese website platform has a lot of video teaching resources. Welcome everyone to learn "css video tutorial" and "HTML video tutorial"!

The above is the detailed content of HTML/css realizes interesting text liquid filling effect. For more information, please follow other related articles on the PHP Chinese website!