CSS realisiert Karusselleffekt (mit Code)

CSS zur Erzielung eines Karusselleffekts (mit Code)

Theoretische Basis

CSS3-Animationseigenschaften und @keyframes-Regeln

Hauptidee

1 Bereiten Sie mehrere Bilder derselben Größe vor

2. Ordnen Sie die anzuzeigenden Bilder horizontal in einem Bildcontainer an

3. Fügen Sie außerhalb des Bildcontainers einen Anzeigecontainer hinzu, und die Größe des Anzeigecontainers entspricht der Größe des Bildes

4. Fügen Sie hinzu Benutzerdefinierte Animation für den Bildcontainer, inkrementelle Offsetwerte in verschiedenen Phasen der Animation festlegen

Hinweise

• Der Animationseffekt ist unterteilt in zwei Teile: Umschalten und Bleiben

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

• Der Offsetwert jeder Stufe von Die Animation hängt von der Bildgröße ab

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

HTML

<p id="container">
    <p id="photo">
        <img  src="/static/imghwm/default1.png"  data-src="1.png"  class="lazy"   / alt="CSS realisiert Karusselleffekt (mit Code)" >
        <img  src="/static/imghwm/default1.png"  data-src="2.png"  class="lazy"   / alt="CSS realisiert Karusselleffekt (mit Code)" >
        <img  src="/static/imghwm/default1.png"  data-src="3.png"  class="lazy"   / alt="CSS realisiert Karusselleffekt (mit Code)" >
    </p>
</p>

Analyse:
Außerhalb des img-Elements wird ein Bildcontainer erstellt, und außerhalb des Der Bildcontainer ist ein Ausstellungscontainer.

CSS

#container {
	width: 400px;
	height: 300px;
	overflow: hidden;
}

#photo {
	width: 1200px;
	animation: switch 5s ease-out infinite;
}

#photo > img {
	float: left;
	width: 400px;
	height: 300px;
}

@keyframes switch {
	0%, 25% {
		margin-left: 0;
	}
	35%, 60% {
		margin-left: -400px;
	}
	70%, 100% {
		margin-left: -800px;
	}
}

Analyse:

1. Die Größe des Anzeigecontainers stimmt mit der Bildgröße überein

2 Es besteht keine Notwendigkeit, das problematische Randproblem zu berücksichtigen.

3 Da das Beispiel nur drei Bilder enthält, werden drei Animationsstufen hinzugefügt, indem ein zunehmender Rand eingestellt wird Wert

4. Die eingestellte Animationsstufe (z. B. 35 % ~ 60 %) ist der Animations-Aufenthaltsteil und die freie Zeit der vorherigen Stufe (z. B. 25 % ~ 35 %) ist der Animationswechselteil Die Länge jedes Teils muss von Ihnen selbst gesteuert werden.

Betriebseffekt

Vielen Dank fürs Lesen, ich hoffe, Sie werden davon profitieren eine Menge.

Dieser Artikel ist reproduziert von: https://blog.csdn.net/u011848617/article/details/80468463

Empfohlenes Tutorial: „CSS-Tutorial“

Das obige ist der detaillierte Inhalt vonCSS realisiert Karusselleffekt (mit Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!