Maison > Article > interface Web > HTML/css réalise un effet de remplissage liquide de texte amusant

HTML/css réalise un effet de remplissage liquide de texte amusant

藏色散人original: 2021-08-30 14:26:192380parcourir

Dans l'article précédent « Comment ajuster dynamiquement le rayon de rotation en utilisant CSS ? 》Vous présente l'effet d'ajustement dynamique du rayon de rotation à l'aide de CSS. Les amis intéressés peuvent en apprendre davantage ~

Cet article vous apportera un effet de mise en œuvre particulièrement intéressant. Tout le monde est intéressé par le "remplissage de texte liquide" mentionné dans le titre. .Effet" Je me demande si vous avez des idées ?

Voyons d'abord à quoi ressemble cet effet, comme le montre l'image ci-dessous :

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

Passons directement au code HTML/css complet :

Remarque : l'animation de texte de remplissage liquide peut utiliser CSS : : avant de terminer le sélecteur. Nous utiliserons des images clés pour définir la hauteur de chaque image de l'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>

L'effet de l'exécution de ce code est comme indiqué dans l'image ci-dessus.

Pour obtenir cet effet, vous devez être familier avec le sélecteur :before et les règles @keyframes en CSS.

:before selector :

:before selector insère le contenu avant le contenu de l'élément sélectionné Vous souhaitez utiliser l'attribut content pour spécifier le contenu à insérer.

Remarque : Pour : avant dans IE8 et les versions antérieures, vous devez déclarer 1a309583e26acea4f04ca31122d8c535

Règles @keyframes :

En utilisant les règles @keyframes, vous pouvez créer des animations. La création d'animations se fait progressivement en passant d'un CSS. styles définis sur un autre. Vous pouvez modifier les paramètres de style CSS plusieurs fois pendant l'animation. Spécifiez quand un changement se produit à l'aide de %, ou des mots-clés « de » et « à », qui sont identiques à 0 % à 100 %. 0% correspond au démarrage de l'animation, 100% correspond à la fin de l'animation. Pour une meilleure prise en charge du navigateur, nous devons toujours définir des sélecteurs pour 0 % et 100 %.

Remarque : utilisez l'attribut d'animation pour contrôler l'apparence de l'animation, et utilisez également le sélecteur pour lier l'animation.

La plate-forme de site Web chinois PHP propose de nombreuses ressources pédagogiques vidéo. Bienvenue à tous pour apprendre le "Tutoriel vidéo CSS" et le "Tutoriel vidéo HTML" !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Créez des lignes de texte ondulées dynamiques intéressantes avec HTML/CSSArticle suivant：Créez des lignes de texte ondulées dynamiques intéressantes avec HTML/CSS

Articles Liés

Voir plus