Reines CSS3 realisiert den Effekt des Ein- und Austretens von Divs in der richtigen Reihenfolge
|
Dieser Artikel stellt hauptsächlich die Wirkung des sequentiellen Ein- und Austretens von Divs unter Verwendung von reinem CSS3 vor. Er hat einen gewissen Referenzwert. Wenn Sie interessiert sind, können Sie mehr darüber erfahren. Wirkung:
Quelltext:
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<Titel></Titel>
<style type="text/css">
div{
Rand oben: 10px;
Höhe: 50px;
Hintergrundfarbe: #FF0000;
Deckkraft: 0,6;
}
.A{
Animation: aa 2s linear 100ms unendlich;
}
.B{
Animation: bb 2s linear unendlich
}
.C{
Animation: CC 2s linear unendlich
}
.D{
Animation:dd 2s linear unendlich
}
@keyframes aa{
0 % {Breite: 0;}
25 % {width:200px;}
50 % {width:200px;}
75 % {width:200px;}
100 % {width:200px;}
}
@keyframes bb{
0 % {Breite: 0;}
25 % {width:0px;}
50 % {width:200px;}
75 % {width:200px;}
100 % {width:200px;}
}
@keyframes cc{
0 % {Breite: 0;}
25 % {width:0px;}
50 % {width:0px;}
75 % {width:200px;}
100 % {width:200px;}
}
@keyframes dd{
0 % {Breite: 0;}
25 % {width:0px;}
50 % {width:0px;}
75 % {width:0px;}
100 % {width:200px;}
}
</Stil>
</Kopf>
<Text>
<div Klasse="a">
</div>
<div Klasse="b">
</div>
<div Klasse="c">
</div>
<div Klasse="d">
</div>
</body>
</html>Dies ist das Ende dieses Artikels darüber, wie man mit reinem CSS3 den Effekt von sequenziellen Ein- und Ausgängen von Divs erzielt. Weitere relevante Inhalte zu sequenziellen Ein- und Ausgängen von CSS3-Divs finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: HTML + CSS zum Erzielen des Spezialeffektcodes für die Aufladung der Wassertropfenfusion
>>: HTML+CSS zum Erreichen eines reaktionsfähigen Karten-Hover-Effekts
Artikel empfehlen
js realisiert die Bildschneidefunktion
In diesem Artikelbeispiel wird der spezifische Co...
CSS-Ansichtsfenstereinheiten für schnelles Layout
CSS-Viewport-Einheiten gibt es schon seit einigen...
Vue-Electron-Problemlösung bei Verwendung des seriellen Ports
Der Fehler lautet wie folgt: Nicht abgefangener T...
Lösen Sie das Problem, dass der MySQL-Server aktiv die Verbindung trennt, wenn kein Betriebstimeout vorliegt
Wenn wir den MySQL-Dienst verwenden, beträgt die ...
JavaScript-Funktion Currying
Inhaltsverzeichnis 1 Was ist Funktions-Currying? ...
Vue-Ereignisparameter $event = Ereigniswertfall
Vorlage <el-table :data="Datenliste"...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.14
Dieser Artikel dokumentiert den Installations- un...
So leiten Sie über den Nginx-Lastausgleich zu https um
Kopieren Sie das Zertifikat und den Schlüssel im ...
So aktivieren Sie die schreibgeschützte Select-Unterstützung, wenn der Hintergrund bei festgelegtem deaktiviertem Attribut keine Daten lesen kann
Code kopieren Der Code lautet wie folgt: <span...
Der Interviewer fragte, wie man in CSS ein festes Seitenverhältnis erreicht
Möglicherweise hatten Sie für diese Frage bisher ...
Beispiel für den Aufbau eines Redis-Sentinel-Clusters basierend auf Docker
1. Übersicht Redis Cluster ermöglicht hohe Verfüg...
Detaillierte Erklärung der MySQL-Berechtigungen und -Indizes
MySQL-Berechtigungen und Indizes Der höchste Benu...
So verwenden Sie Axios, um mehrere wiederholte Anfragen in einem Projekt zu filtern
Inhaltsverzeichnis 1. Einleitung: In diesem Fall ...
Lösung zum automatischen Stoppen des MySQL-Dienstes
Dieser Artikel stellt hauptsächlich die Lösung fü...
Verwenden Sie die Tools iptables und firewalld, um Verbindungsregeln für die Linux-Firewall zu verwalten
Firewall Eine Firewall ist eine Reihe von Regeln....