Reines CSS3 realisiert den Effekt des Ein- und Austretens von Divs in der richtigen Reihenfolge

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

CSS erkennt, dass die linke Seite der Webseitenspalte fixiert ist und passt die Position beim Scrollen nach unten automatisch an

Vorschauadresse: https://ovsexia.gitee.io/leftfix...

15 Linux-Befehlsaliase, die Ihnen Zeit sparen

Vorwort Bei der Verwaltung und Wartung des Linux-...

Vue-Bindungsobjekt, Array-Daten können nicht dynamisch gerendert werden – detaillierte Erläuterung

Projektszenario: Dark Horse Vue Projektmanagement...

Verwenden Sie semantische Tags, um Ihr HTML kompatibel mit IE6,7,8 zu schreiben

HTML5 fügt weitere semantische Tags hinzu, wie et...

Natives JavaScript zum Erzielen von Folieneffekten

Wenn wir eine Seite erstellen, insbesondere eine ...

Zusammenfassung der Fallstricke bei der Installation von MySQL und MySQLClient auf CentOS7

1. MySQL Yum-Repository hinzufügen Offizielle MyS...

SQL-Implementierung von LeetCode (175. Zwei Tabellen verbinden)

[LeetCode] 175.Zwei Tabellen kombinieren Tabelle:...

MySQL-Datenbankgrundlagen: Eine Zusammenfassung der grundlegenden Befehle

Inhaltsverzeichnis 1. Hilfeinformationen nutzen 2...

Erfahrungen bei der Neugestaltung der Homepage von TOM.COM

<br />Ohne Vorwarnung sah ich auf cnBeta Neu...

js realisiert Warenkorb-Add- und Subtraktions- sowie Preisberechnungsfunktionen

In diesem Artikel wird der spezifische Code von j...

So verwenden Sie Lottie-Animationen in React Native-Projekten

Lottie ist eine von Airbnb entwickelte Open-Sourc...

Detaillierte Erklärung zur Verwendung von Vue zum Laden von Wetterkomponenten

In diesem Artikel erfahren Sie, wie Sie mit Vue W...

Implementierung einer vereinfachten Version von JSON.stringify und seine sechs Hauptfunktionen im Detail erklärt

Inhaltsverzeichnis Vorwort Sechs Funktionen von J...

Auszeichnungssprache - CSS-Layout

Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...

Vollständiges Installationstutorial zum Ubuntu 16.04-Image unter VMware

In diesem Artikel finden Sie das Installations-Tu...