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

>>: MySQL-Methode zum Generieren von Zufallszahlen, Zeichenfolgen, Daten, Bestätigungscodes und UUIDs

Ein praktischer Bericht über XSS-Angriffe in einem VUE-Projekt

CSS zum Erzielen eines Beispielcodes für eine Bildlaufleiste

Ein praktischer Bericht über XSS-Angriffe in einem VUE-Projekt

MySQL fragt den aktuellsten Datensatz der SQL-Anweisung ab (Optimierung)

Einfache Anwendungsbeispiele für benutzerdefinierte MySQL-Funktionen

Verbindung zum lokalen MySQL über Socket-Lösung „/tmp/mysql.sock“ nicht möglich

Installieren Sie das Linux-System automatisch basierend auf Cobbler

Eine kurze Diskussion über JS-Verpackungsobjekte

Einführung in die grundlegenden TypeScript-Typen

Das neueste grafische Tutorial zur Installation und Konfiguration von MySQL 5.7.23

Eine Zusammenfassung der Wissenspunkte zur Datenbankindizierung. Alles, was Sie wissen müssen, finden Sie hier.

Implementierung von Platzhaltern und Escape-Zeichen in der Linux-Befehlszeile

Artikel empfehlen

Grafisches Tutorial zur Deinstallation und Installation von MySQL unter Linux

So verwenden Sie die Clipboard-API in JS

Beispiel für die Konvertierung von Webpack-Bildern in Base64

Über Tomcat kombiniert mit Atomikos zur Implementierung von JTA

js realisiert Warenkorb-Add- und Subtraktions- sowie Preisberechnungsfunktionen

So implementieren Sie Import- und Exportbefehle für MySQL-Datenbanken unter Linux

Analysieren der Knotenereignisschleife und der Nachrichtenwarteschlange

Zusammenfassung der bei der Installation von Docker auf der Home-Version von Win10 aufgetretenen Probleme

Eine kurze Einführung in Linux-Umgebungsvariablendateien

Zusammenfassung einiger kleinerer Probleme mit der MySQL-Autoinkrement-ID

So verwenden Sie das JavaScript-Strategiemuster zum Validieren von Formularen

Zusammenfassung der MySQL-Fremdschlüsseleinschränkungen und Tabellenbeziehungen

Reines CSS-Problem mit benutzerdefinierten mehrzeiligen Auslassungspunkten (vom Prinzip bis zur Implementierung)

Detaillierte Erläuterung des MySQL Master-Slave-Replikationsprozesses

TD bei der Webseitenproduktion kann auch über die versteckte Anzeige hinauslaufen