So implementieren Sie mit CSS eine Bildlaufleiste (mit Code)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von CSS zum Implementieren einer Bildlaufleiste (mit Code). Ich hoffe, dass er für Freunde hilfreich ist.

Auf einigen Websites sieht man häufig, dass einige Bilder kontinuierlich scrollen. Dieser Effekt kann durch CSS-Animationseffekte erzielt werden. Der spezifische Effekt ist wie folgt

Das Hauptprinzip besteht darin, sich durch Animation nach links zu bewegen.

Geben Sie zunächst zwei Sätze derselben Bilder (in derselben Zeile) an und verschieben Sie das Gesamtbild um die Länge eines Bildsatzes nach links.

Auf diese Weise wird es geschehen Wenn die Animation endet, kehrt sie schnell zu ihrer ursprünglichen Position zurück. Zu diesem Zeitpunkt wechselt sie sich mit der zweiten Bildgruppe ab. Es sieht aus wie eine Gruppe von Bildern, die in einer Endlosschleife nach links scrollen.

Die spezifischen Schritte sind wie folgt:

1. Stellen Sie überall im Körpercode zwei Sätze derselben Bilder ein

 <nav>
        <ul>
            <li><img src="Images/1 (2).jpg" alt=""></li>
            <li><img src="Images/2 (2).jpg" alt=""></li>
            <li><img src="Images/3 (2).jpg" alt=""></li>
            <li><img src="Images/1 (2).jpg" alt=""></li>
            <li><img src="Images/2 (2).jpg" alt=""></li>
            <li><img src="Images/3 (2).jpg" alt=""></li>
        </ul>
    </nav>

2. Legen Sie die Größe der Navigation fest, die Breite ist die Gesamtbreite einer Gruppe von Bildern und die Höhe ist die Höhe des Bildes.

 
        nav {
            width: 750px;
            height: 170px;
            border: 1px solid red;
            margin: 100px auto;
}

3. Legen Sie die UL-Größe fest, die Breite ist doppelt so groß wie die von Nav, die Höhe entspricht der von Nav und geben Sie animationsbezogene Attribute an

ul {
            width: 200%;
            height: 100%;
            animation: picmove 5s linear infinite forwards;
        }

Animation definieren, hauptsächlich die Länge einer Gruppe von Bildern nach links verschieben

 @keyframes picmove {
            from {
                transform: translate(0);
            }
            to {
                transform: translate(-750px);
            }
        }

5. Fügen Sie „Mouse Hover Stop“ hinzu, den Effekt der Animationspause.

ul:hover {
            animation-play-state: paused;
        }

damit der gesamte Satz scrollender Bildleisten fertig ist. Okay

Der Gesamtcode lautet wie folgt

    
    
    
    
    



    <nav>
        <ul>
            <li><img src="Images/1 (2).jpg" alt=""></li>
            <li><img src="Images/2 (2).jpg" alt=""></li>
            <li><img src="Images/3 (2).jpg" alt=""></li>
            <li><img src="Images/1 (2).jpg" alt=""></li>
            <li><img src="Images/2 (2).jpg" alt=""></li>
            <li><img src="Images/3 (2).jpg" alt=""></li>
        </ul>
    </nav>

Das obige ist der detaillierte Inhalt vonSo implementieren Sie mit CSS eine Bildlaufleiste (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!