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
Artikel empfehlen
MySQL-Gleitaggregation/Jahresaggregation – Prinzip und Anwendungsbeispielanalyse
In diesem Artikel werden anhand von Beispielen di...
Detaillierte Erläuterung zur Lösung des Problems des domänenübergreifenden Zugriffs auf statische Nginx/Apache-Ressourcen
1. Domänenübergreifender Zugriff auf statische Ap...
Der Grund, warum MySQL die Binlog-Datei manuell registriert und Master-Slave-Anomalien verursacht
1. Quelle des Problems Ein Freund von @水米田 hat mi...
Beispielcode zur Implementierung des Bildschubladeneffekts mit CSS3
Wie üblich posten wir zuerst den Bildeffekt: Das ...
So fügen Sie eine Schnittstellen-Abhörmaske in ein Vue-Projekt ein
1. Geschäftshintergrund Die Verwendung einer Mask...
Detaillierte Erläuterung der Methode zur Festlegung des MySQL-Zeichensatzes (Terminal-Zeichensatz)
Vorwort Jedes Mal, wenn ich das Terminal verwende...
VUE+Canvas implementiert das Spiel God of Wealth und erhält Barren
Willkommen zur vorherigen Canvas-Spielserie: 《VUE...
So verbessern Sie die Startgeschwindigkeit von Idea und beheben Probleme mit verstümmelten Zeichen im Tomcat-Protokoll
Inhaltsverzeichnis Vorwort Ideenstartgeschwindigk...
Verwendung des Linux-Befehls ipcs
1. Befehlseinführung Der Befehl ipcs wird verwend...
Wie der Linux-Kernel in den Prozessadressraum eindringt und den Prozessspeicher ändert
Die Isolierung von Prozessadressräumen ist ein be...
HTML-Tabellen-Markup-Tutorial (39): Das helle Rahmenfarbattribut der Kopfzeile BORDERCOLORLIGHT
Im Tabellenkopf können Sie die Farbe der hellen U...
So implementieren Sie die Verschlüsselung und Entschlüsselung vertraulicher Daten in einer MySQL-Datenbank
Inhaltsverzeichnis 1. Vorbereitung 2. MySQL-Versc...
So rufen Sie einen HTML-Code auf mehreren HTML-Seiten gemeinsam auf
Methode 1: Skriptmethode verwenden: Erstellen Sie...
Detailliertes Beispiel zum Auffinden und Optimieren langsamer SQL-Abfragen in MySQL
Inhaltsverzeichnis 1. So finden und optimieren Si...
Prinzip des Linux-Nohup-Befehls und Beispielanalyse
nohup-Befehl Bei der Verwendung von Unix/Linux mö...