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
Detaillierte Erläuterung der gespeicherten Prozeduren und Funktionen von MySQL
1 Gespeicherte Prozedur 1.1 Was ist eine gespeich...
Nginx: Ein Domänenname für den Zugriff auf mehrere Projekte – Methodenbeispiel
Hintergrund Kürzlich stieß ich bei der Bereitstel...
Analysieren Sie mehrere gängige Lösungen für MySQL-Ausnahmen
Inhaltsverzeichnis Vorwort 1. Der vom Code konfig...
Allgemeine Struktur-Tags in XHTML
Struktur Text, Kopf, HTML, Titel Text abbr, Akron...
Detaillierte Erklärung und Erweiterung von ref und reactive in Vue3
Inhaltsverzeichnis 1. Ref und reaktiv 1. reaktiv ...
Detaillierte Schritte zum Erstellen eines Dateiservers in Windows Server 2012
Der Dateiserver ist einer der am häufigsten verwe...
Vue implementiert dynamische Routingdetails
Inhaltsverzeichnis 1. Frontend-Steuerung 1. In de...
Detaillierte Erläuterung des Lazy Loading und Preloading von Webpack
Inhaltsverzeichnis Normale Belastung Lazy Loading...
Einfaches Webdesign-Konzept – Farbabstimmung
(I) Grundkonzepte der Farbabstimmung auf Webseiten...
Eine Sammlung gängiger Verwendungen von HTML-Meta-Tags
Was ist ein Mata-Tag? Das <meta>-Element li...
Detaillierte Erläuterung von Django + Vue + Docker zum Erstellen einer Schnittstellentestplattform
1. Zwei Wörter am Anfang Hallo zusammen, mein Nam...
JavaScript implementiert kreisförmiges Karussell
In diesem Artikel wird der spezifische JavaScript...
Vue implementiert ein Beispiel für eine verschachtelte Routing-Methode
1. Verschachteltes Routing wird auch als Sub-Rout...
Detailliertes Beispiel für MySQL-Joint-Tabellen-Update-Daten
1.MySQL UPDATE JOIN-Syntax In MySQL können Sie di...
Best Practices-Handbuch zum Speichern von Daten in MySQL
Inhaltsverzeichnis Vorwort Verwenden Sie keine Ze...