So scrollen Sie Bilder in CSS

So scrollen Sie Bilder in CSS: Legen Sie zuerst zwei Sätze derselben Bilder in jedem Teil des Hauptcodes fest. Legen Sie dann die Größe von Nav und UL fest und fügen Sie dann den Effekt des Mauszeigens und der Animationspause hinzu ; schließlich „overflow“ zu nav :hidden hinzufügen, um den überschüssigen Teil auszublenden.

Die Betriebsumgebung dieses Tutorials: Windows7-System, HTML5- und CSS3-Version, DELL G3-Computer.

Empfohlen: CSS-Video-Tutorial

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

Auf diese Weise kehrt es am Ende der Animation schnell zur ursprünglichen Position zurück und wechselt zu diesem Zeitpunkt mit dem zweiten Bildsatz. Es sieht aus wie eine Reihe von Bildern, die in einer Endlosschleife nach links scrollen.

Die spezifischen Schritte sind wie folgt:

1. Legen Sie überall im Hauptcode zwei Sätze derselben Bilder fest Höhe ist die Höhe des Bildes.

<nav>
  <ul>
<li>
  <img src="image/1.jpg" alt=""></li>
<li>
  <img src="image/2.jpg" alt=""></li>
<li>
  <img src="image/3.jpg" alt=""></li>
<li>
  <img src="image/4.jpg" alt=""></li>
<li>
  <img src="image/5.jpg" alt=""></li>
<li>
  <img src="image/6.jpg" alt=""></li>
  </ul>
</nav>

3. Legen Sie die UL-Größe fest, die Breite ist doppelt so groß wie die Navigation, und geben Sie die animationsbezogenen Attribute an.

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

4 Definieren Sie die Animation, hauptsächlich um die Länge einer Gruppe zu verschieben Anzahl der Bilder auf der linken Seite

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

5. Wenn die Maus darüber schwebt, wird die Animation angehalten

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

6 Zum Schluss fügen Sie overflow:hidden zur Navigation hinzu, um den gesamten Satz scrollender Bildleisten auszublenden Fertig

Der Gesamtcode lautet wie folgt

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

Rendering:

Das obige ist der detaillierte Inhalt vonSo scrollen Sie Bilder in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!