CSS zum Erzielen eines Beispielcodes für eine Bildlaufleiste
|
Auf manchen Websites sieht man oft Bilder, die kontinuierlich scrollen. Dieser Effekt kann durch CSS-Animationseffekte erreicht werden. Die konkreten Auswirkungen sind wie folgt
Das Hauptprinzip besteht darin, sich durch Animation nach links zu bewegen. Verschieben Sie zunächst bei zwei Sätzen identischer Bilder (in der gleichen Zeile) das gesamte Bild um die Länge eines Bildsatzes nach links. Auf diese Weise kehrt es nach Ende der Animation schnell in seine Ausgangsposition zurück und wechselt zu diesem Zeitpunkt mit dem zweiten Bildersatz ab, sodass es aussieht, als würde ein Bildersatz in einem kontinuierlichen Zyklus nach links scrollen. Die einzelnen Schritte sind wie folgt: 1. Legen Sie in jedem Teil des Hauptcodes zwei Sätze identischer Bilder fest
<Navigation>
<ul>
<li><img src="Bilder/1 (2).jpg" alt=""></li>
<li><img src="Bilder/2 (2).jpg" alt=""></li>
<li><img src="Bilder/3 (2).jpg" alt=""></li>
<li><img src="Bilder/1 (2).jpg" alt=""></li>
<li><img src="Bilder/2 (2).jpg" alt=""></li>
<li><img src="Bilder/3 (2).jpg" alt=""></li>
</ul>
</nav> 2. Legen Sie die Größe der Navigation fest. Die Breite ist die Breite einer Gruppe zusammengerechneter Bilder und die Höhe ist die Höhe der Bilder.
Navigation {
Breite: 750px;
Höhe: 170px;
Rand: 1px durchgehend rot;
Rand: 100px automatisch;
}3. Legen Sie die UL-Größe fest, die Breite ist doppelt so groß wie die von NAV, die Höhe ist dieselbe wie bei NAV und geben Sie die animationsbezogenen Eigenschaften an
ul {
Breite: 200 %;
Höhe: 100%;
Animation: Picmove 5 s linear unendlich vorwärts;
}4. Definieren Sie die Animation, hauptsächlich um die Länge einer Bildergruppe nach links zu verschieben
@keyframes Bildbewegung {
aus {
transformieren: übersetzen(0);
}
Zu {
transformieren: übersetzen(-750px);
}
}5. Fügen Sie den Effekt des Mauszeigers und der Animationspause hinzu
ul:hover {
Animations-Wiedergabestatus: angehalten;
}6. Fügen Sie abschließend overflow:hidden zu nav hinzu, um den überzähligen Teil auszublenden, sodass der gesamte Satz scrollender Bildleisten bereit ist. Der Gesamtcode lautet wie folgt
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Dokument</title>
<Stil>
* {
Rand: 0;
Polsterung: 0;
}
ul {
Listenstil: keiner;
}
Navigation {
Breite: 750px;
Höhe: 170px;
Rand: 1px durchgehend rot;
Rand: 100px automatisch;
Überlauf: versteckt;
}
ul {
Breite: 200 %;
Höhe: 100%;
Animation: Picmove 5 s linear unendlich vorwärts;
}
@keyframes Bildbewegung {
aus {
transformieren: übersetzen(0);
}
Zu {
transformieren: übersetzen(-750px);
}
}
img {
Breite: 250px;
Höhe: 170px;
schweben: links;
}
ul:hover {
Animations-Wiedergabestatus: angehalten;
}
</Stil>
</Kopf>
<Text>
<Navigation>
<ul>
<li><img src="Bilder/1 (2).jpg" alt=""></li>
<li><img src="Bilder/2 (2).jpg" alt=""></li>
<li><img src="Bilder/3 (2).jpg" alt=""></li>
<li><img src="Bilder/1 (2).jpg" alt=""></li>
<li><img src="Bilder/2 (2).jpg" alt=""></li>
<li><img src="Bilder/3 (2).jpg" alt=""></li>
</ul>
</nav>
</body>
</html>Zusammenfassen Oben sehen Sie den Beispielcode der vom Editor eingeführten CSS-Bildlaufleiste. Ich hoffe, er ist für alle hilfreich. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Webdesign-Tipps für Formular-Eingabefelder
Artikel empfehlen
Zusammenfassung der Lösungen für MySQL, das „Gruppieren nach“ nicht unterstützt
Ich habe die neueste Version von MySQL 5.7.x heru...
Vue2.0 implementiert adaptive Auflösung
In diesem Artikel wird der spezifische Code von V...
Erläuterung der Regeln zum Standortabgleich für die Nginx-Konfiguration (Beispiel)
Der Umfang der Konfigurationsanweisungen von ngin...
So verwenden Sie Indizes zur Optimierung von MySQL ORDER BY-Anweisungen
Tabelle erstellen und Index erstellen Tabelle tbl...
So konfigurieren Sie Http, Https, WS und WSS in Nginx
Vorne geschrieben Im heutigen Internetbereich ist...
Tutorial zur HTML-Tabellenauszeichnung (22): Zeilenrahmen-Farbattribut BORDERCOLORLIGHT
Innerhalb der Zeilen können die hellen Rahmenfarb...
Sehen Sie sich die häufig verwendeten SQL-Anweisungen in MySQL an (ausführliche Erklärung)
#mysql -uroot -p Passwort eingeben mysql> voll...
Ein Beispiel für die Implementierung einer einfachen Endlosschleifen-Scrolling-Animation in Vue
Dieser Artikel stellt hauptsächlich ein Beispiel ...
Detaillierte Erläuterung des Implementierungsprozesses des Docker-Cross-Host-Container-Kommunikations-Overlays
Es gibt auch zwei Server: Vorbereitung: Legen Sie...
Mysql teilt Zeichenfolge durch gespeicherte Prozedur in Array auf
Um einen String in ein Array aufzuteilen, müssen ...
Docker erstellt Redis5.0 und mountet Daten
Inhaltsverzeichnis 1. Einfaches Einbinden persist...
Detaillierte Erklärung der allgemeinen For-Schleife in JavaScript-Anweisungen
Es gibt viele Schleifenanweisungen in JavaScript,...
Mehrere Situationen, die dazu führen, dass MySQL einen vollständigen Tabellenscan durchführt
Inhaltsverzeichnis Fall 1: Fall 2: Fall 3: Um es ...
Verwenden des JS-Timers zum Verschieben von Elementen
Verwenden Sie einen JS-Timer, um ein Element zu e...
Tutorial zum Bereitstellen eines Springboot-Pakets in einer Linux-Umgebung mithilfe von Docker
Da Springboot über einen integrierten Tomcat-Serv...