CSS 3.0 Text Hover Jump Spezialeffekte-Code

Hier ist ein mit CSS 3.0 implementierter Textschweb- und -sprungeffekt. Der Effekt ist wie folgt:

Nachfolgend sehen Sie die Code-Implementierung. Sie können diese gerne kopieren, einfügen und sammeln.

<!DOCTYPE html>
<html lang="de">
 
    <Kopf>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
        <title>CSS 3.0-Text-Hover- und Bounce-Effekte</title>
        <Stil>
            * {
                Rand: 0;
                Polsterung: 0;
            }
            Körper {
                Anzeige: Flex;
                Inhalt ausrichten: zentriert;
                Elemente ausrichten: zentrieren;
                Mindesthöhe: 100vh;
                Hintergrund: #000;
            }
 
            .loader {
                Position: relativ;
            }
 
            .loader span {
                Position: relativ;
                Schriftgröße: 2em;
                Farbe: #fff;
                Anzeige: Inline-Block;
                Texttransformation: Großbuchstaben;
                Animation: 2 s animieren, unendliches Ein- und Ausblenden;
                Animationsverzögerung: calc(0,1 s * var(--i));
                Animations-Wiedergabestatus: angehalten;
            }
 
            .loader:hover span {
                Animations-Wiedergabestatus: läuft;
            }
            @keyframes animieren {
 
                0%,
                40%,
                100 % {
                    transformieren: übersetzenY(0);
                }
 
                20% {
                    transformieren: übersetzenY(-50px);
                }
            }
        </Stil>
    </Kopf>
 
    <Text>
        <div Klasse="Lader">
            <span style="--i:1;">EIN</span>
            <span style="--i:2;">n</span>
            <span style="--i:3;">ich</span>
            <span style="--i:4;">m</span>
            <span style="--i:5;">ein</span>
            <span style="--i:6;">t</span>
            <span style="--i:7;">ich</span>
            <span style="--i:8;">o</span>
            <span style="--i:9;">n</span>
            <span style="--i:10;">_</span>
            <span style="--i:11;">P</span>
            <span style="--i:12;">l</span>
            <span style="--i:13;">ein</span>
            <span style="--i:14;">j</span>
            <span style="--i:15;">_</span>
            <span style="--i:16;">S</span>
            <span style="--i:17;">t</span>
            <span style="--i:18;">ein</span>
            <span style="--i:19;">t</span>
            <span style="--i:20;">e</span>
            <span style="--i:21;">.</span>
        </div>
    </body>
 
</html>

Zusammenfassen

Dies ist das Ende dieses Artikels über den CSS 3.0-Text-Hover-Jump-Spezialeffektcode. Weitere relevante CSS 3.0-Text-Hover-Jump-Inhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Element-ui klickt direkt auf die Zelle in der Tabelle, um sie zu bearbeiten

>>: Eine kurze Erläuterung zur Lösung des Depends_on-Reihenfolgeproblems in Docker-Compose