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
Was tun, wenn Sie das ursprüngliche Passwort für MySQL auf dem MAC vergessen?
Die Methode zur Lösung des Problems, das anfängli...
Schreiben eines Shell-Skripts in Ubuntu zum automatischen Start beim Booten (empfohlen)
Der Zweck des Schreibens von Skripten besteht dar...
Informationen zur Bildlaufleiste in HTML/Bildlaufleiste entfernen
1. Die Farbe der Bildlaufleiste unter xhtml Im Ori...
Realisierung der Echtzeit-Dateisynchronisierung zwischen Linux-Servern
Anwendungsszenarien Bei vorhandenen Servern A und...
Fallstricke bei langsamen MySQL-Abfragen
Inhaltsverzeichnis 1. Langsame Abfragekonfigurati...
25 Tools zur Verbesserung der Website-Benutzerfreundlichkeit und Conversion-Raten
Bei einer Website bezieht sich die Benutzerfreundl...
Vue+el-table realisiert das Zusammenführen von Zellen
In diesem Artikelbeispiel wird der spezifische Co...
Implementierung einer geplanten Sicherung in Mysql5.7
1. Suchen Sie mysqldump.exe im MySQL-Installation...
MySQL Master-Slave-Replikationsprinzip und zu beachtende Punkte
Vorne geschrieben Ich habe kürzlich ein spezielle...
So generieren Sie eine Vue-Benutzeroberfläche per Drag & Drop
Inhaltsverzeichnis Vorwort 1. Technisches Prinzip...
CentOS 7 Installations- und Konfigurations-Tutorial unter VMware10
Während Ubuntu heute das beliebteste Linux-Betrie...
Linux-Tutorial zum Ersetzen von Zeichenfolgen mit dem Befehl sed
Um eine Zeichenfolge zu ersetzen, müssen wir das ...
So konfigurieren Sie Linux für die Verwendung der LDAP-Benutzerauthentifizierung
Ich verwende die in CentOS implementierte LDAP-Be...
So verwenden Sie dynamische Parameter und berechnete Eigenschaften in Vue
1. Dynamische Parameter Ab 2.6.0 können Sie einen...
Detaillierte Erläuterung der MySql-Datentyp-Tutorialbeispiele
Inhaltsverzeichnis 1. Kurzübersicht 2. Detaillier...