HTML/CSS realisiert einen interessanten Textflüssigkeitsfülleffekt-HTML-Tutorial-php.cn

HTML/CSS realisiert einen interessanten Textflüssigkeitsfülleffekt

藏色散人

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

Original

2409 Leute haben es durchsucht

Im vorherigen Artikel „Wie passt man den Rotationsradius mithilfe von CSS dynamisch an?“ 》Führt Sie in den Effekt der dynamischen Anpassung des Rotationsradius mithilfe von CSS ein. Interessierte Freunde können mehr darüber erfahren~

Dieser Artikel wird Ihnen einen besonders interessanten Implementierungseffekt bringen der Titel. Ich frage mich, ob Sie irgendwelche Ideen haben?

Schauen wir uns zunächst an, wie dieser Effekt aussieht, wie im Bild unten gezeigt:

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

Gehen wir direkt zum vollständigen HTML-/CSS-Code:

Hinweis: Textanimationen mit flüssiger Füllung können verwendet werden CSS: :before Selektor zum Vervollständigen. Wir verwenden Keyframes, um die Höhe jedes Animationsframes festzulegen.

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

Nach dem Login kopieren

Die Auswirkung der Ausführung dieses Codes ist wie im Bild oben dargestellt.

Um diesen Effekt zu erzielen, müssen Sie mit den Regeln „:before selector“ und „@keyframes“ in CSS vertraut sein.

:before selector:

:before selector fügt Inhalte vor dem Inhalt des ausgewählten Elements ein. Sie möchten das Inhaltsattribut verwenden, um den einzufügenden Inhalt anzugeben.

Hinweis: Für :before in IE8 und früheren Versionen müssen Sie

@keyframes-Regeln deklarieren:

Mit @keyframes-Regeln können Sie Animationen erstellen, indem Sie schrittweise von einem CSS wechseln Stile auf einen anderen eingestellt. Sie können die CSS-Stileinstellungen während der Animation mehrmals ändern. Geben Sie an, wann eine Änderung erfolgt, indem Sie % oder die Schlüsselwörter „von“ und „bis“ verwenden, die mit 0 % bis 100 % identisch sind. 0 % bedeutet, dass die Animation beginnt, 100 % bedeutet, dass die Animation beendet ist. Für eine optimale Browserunterstützung sollten wir immer Selektoren für 0 % und 100 % definieren.

Hinweis: Verwenden Sie das Animationsattribut, um das Erscheinungsbild der Animation zu steuern, und verwenden Sie auch den Selektor, um die Animation zu binden.

Die chinesische Website-Plattform PHP verfügt über viele Video-Lehrressourcen. Willkommen alle, die „CSS-Video-Tutorial“ und „HTML-Video-Tutorial“ lernen möchten!

Das obige ist der detaillierte Inhalt vonHTML/CSS realisiert einen interessanten Textflüssigkeitsfülleffekt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!