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

impress.js Präsentationsschicht-Framework (Demonstrationstool) - erste Erfahrungen

Artikel

Verwenden Sie .Htaccess, um böswillige IP-Angriffe auf Websites zu verhindern, den Zugriff auf bestimmte Domänennamen zu untersagen, Maschinencrawler zu untersagen und Hotlinking zu untersagen

Artikel

Eine detaillierte Einführung in den netstat-Befehl in Linux

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

impress.js Präsentationsschicht-Framework (Demonstrationstool) - erste Erfahrungen

Verwenden Sie .Htaccess, um böswillige IP-Angriffe auf Websites zu verhindern, den Zugriff auf bestimmte Domänennamen zu untersagen, Maschinencrawler zu untersagen und Hotlinking zu untersagen

Eine detaillierte Einführung in den netstat-Befehl in Linux

Verwenden Sie js in html, um die lokale Systemzeit abzurufen

So ändern Sie das Passwort des Root-Benutzers in MySQL

Das einfachste Tutorial zur Sicherung und Wiederherstellung von MySQL-Daten aller Zeiten (Teil 2) (Teil 36)

Beispielcode zur Implementierung fortlaufender Updates von Diensten mit Docker Swarm

Linux verwendet Rsync + Inotify, um eine Echtzeitsynchronisierung lokaler und Remotedaten zu erreichen

JavaScript fügt Prototyp-Methodenimplementierung für integrierte Objekte hinzu

Führen Sie die Schritte zum Zurücksetzen des Root-Benutzerkennworts in MySQL8 aus

Artikel empfehlen

So verwenden Sie Typescript zum Kapseln von lokalem Speicher

So implementieren Sie Sveltes Defer Transition in Vue

Installation und Verwendung des Linux-Betriebs- und Wartungstools Supervisor (Prozessmanagement-Tool)

js, um die Funktion zum Hochladen von Bildern zu realisieren

Grafisches Tutorial zur Installation von MySQL 8.0.15 und Datenbankgrundlagen

Ein kurzer Vortrag über JavaScript Sandbox

Vue3 realisiert den Bildlupeneffekt

So installieren und ändern Sie das Anfangskennwort von mysql5.7.18

Teilen Sie 8 sehr nützliche CSS-Entwicklungstools

Detaillierte Erklärung der Funktionsweise der Node.js-Middleware

MySQL-Fall bei der Verwendungsbeispielanalyse

Die Vorteile und Beispiele für die Platzierung der Sitemap am unteren Rand der Webseite

HTML-strukturierte Implementierungsmethode

Drei Möglichkeiten zum Aktualisieren von Iframes

Erfahrungsaustausch über die Priorität des Ladens von CSS-Stilen