Home > Article > Web Front-end > HTML/css realizes interesting text liquid filling effect

HTML/css realizes interesting text liquid filling effect

藏色散人Original: 2021-08-30 14:26:192291browse

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>

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

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Make interesting dynamic wavy lines of text with HTML/CSSNext article：Make interesting dynamic wavy lines of text with HTML/CSS

See more

HTML/css realizes interesting text liquid filling effect

Related articles