Heim > Artikel > Web-Frontend > HTML/CSS realisiert einen interessanten Textflüssigkeitsfülleffekt

HTML/CSS realisiert einen interessanten Textflüssigkeitsfülleffekt

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

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>

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

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Erstellen Sie mit HTML/CSS interessante dynamische, wellenförmige TextzeilenNächster Artikel：Erstellen Sie mit HTML/CSS interessante dynamische, wellenförmige Textzeilen

In Verbindung stehende Artikel

Mehr sehen