Wie verwende ich CSS, um einen Bildkarusselleffekt zu erzielen? (Codebeispiel)

In diesem Artikel erfahren Sie, wie Sie mit CSS einen Bildkarusselleffekt erzielen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird für alle hilfreich sein.

【Empfohlenes Tutorial: CSS-Video-Tutorial】

Theoretische Basis

CSS3-Animationseigenschaften und @keyframes-Regeln

Hauptidee

• Bereiten Sie mehrere Bilder vor gleiche Größe

• Platzieren Sie die anzuzeigenden Bilder horizontal in einem Bildcontainer.

• Fügen Sie einen Anzeigecontainer außerhalb des Bildcontainers hinzu. Die Größe des Anzeigecontainers entspricht der Größe des Bildes Legen Sie inkrementelle Werte in verschiedenen Phasen der Animation fest. Versatzwert

• Hinweise

Der Animationseffekt ist in zwei Teile unterteilt: Umschalten und Bleiben

• Die benutzerdefinierte Animationsphase hängt von der Anzahl ab Bilder

• Der Versatzwert jeder Phase der Animation hängt von der Bildgröße ab.

• Im Beispiel in diesem Artikel gibt es keinen Wechseleffekt vom letzten Bild zum ersten Bild vom letzten Bild zum ersten Bild, eins nach dem anderen.

• CSS

  <div id="container">
      <div id="photo">
          <img src="1.png" />
          <img src="2.png" />
          <img src="3.png" />
      </div>
  </div>

Analyse:

Die Größe des Anzeigecontainers entspricht der Bildgröße.

Fügen Sie dem Bild einen Float-Effekt hinzu, ohne dass das problematische Randproblem berücksichtigt werden muss.

Da das Beispiel nur drei Bilder enthält , drei Animationsstufen werden hinzugefügt, um den Umschalteffekt durch Festlegen eines zunehmenden Rand-Links-Werts zu erreichen. Die eingestellte Animationsstufe (zum Beispiel: 35 % ~ 60 %) ist der Verweilzeitteil der Animation und die Leerlaufzeit von Die vorherige Stufe (zum Beispiel: 25 % ~ 35 %) ist der Teil zum Umschalten der Animation. Die Länge jedes Teils muss von Ihnen selbst gesteuert werden. Der Laufeffekt. Für weitere programmbezogene Kenntnisse. Bitte besuchen Sie:

Programmiervideo

! !

Das obige ist der detaillierte Inhalt vonWie verwende ich CSS, um einen Bildkarusselleffekt zu erzielen? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!