So verwenden Sie CSS3, um automatische Rotationseffekte von Bildern zu erzielen (vollständiger Code im Anhang)

Dieser Artikel stellt vor, wie man mit CSS3 den Karusselleffekt von Bildern realisiert, und konzentriert sich auf die spezifischen Schritte. Der Inhalt dieses Artikels ist kompakt und ich hoffe, dass jeder etwas gewinnen kann.

Wenn Sie im Internet surfen, werden Sie auf einen Spezialeffekt stoßen, der als Bilderkarussell bezeichnet wird: Verschiedene Bilder an derselben Position werden je nach zeitlichen Änderungen in einer Schleife abgespielt, wodurch eine Art Diashow ähnlich dem Effekt entsteht. Wie implementieren wir also Bildkarusselleffekte während der Webentwicklung? In diesem Artikel erfahren Sie, wie Sie mit CSS3 Bildkarusselleffekte erzielen.

Die Hauptidee der Verwendung von CSS3 zur Erzielung von Karusselleffekten

Wir werden mehrere Bilder derselben Größe im vorbereiten Dieselbe Position. Platzieren Sie es horizontal im Div-Container und legen Sie dann einen Anzeigecontainer über dem Div-Container fest, wobei die Größe des Anzeigecontainers mit der Größe des Bildes übereinstimmt. Fügen Sie schließlich eine benutzerdefinierte Animation zum Bildcontainer hinzu , und legen Sie inkrementelle Offset-Werte in verschiedenen Phasen der Animation fest.

Hinweis

Der Animationseffekt ist in zwei Teile unterteilt: Wechseln und Bleiben.

Der Offsetwert der Animation hängt von der Bildgröße ab.

Das Prinzip der Verwendung von CSS3 zur Implementierung von Karusselleffekten

Zunächst müssen Sie die Größe des Anzeigebehälters sicherstellen entspricht der Größe des Bildes, und fügen Sie dann den Float-Effekt hinzu, bestimmen Sie dann die Anzahl der einzufügenden Bilder und legen Sie Animationsstufen für jedes Bild fest, wobei jede Stufe den Umschalteffekt erzielt, indem Keyframes verwendet werden, um zunehmende Werte für den linken Rand festzulegen.

Schritte (Code) zur Verwendung von CSS3 zum Implementieren von Bildkarusselleffekten

Schritt 1: Bilder mit HTML hinzufügen

<div id="container">
    <div id="photo">
        <img  src="1.png" / alt="So verwenden Sie CSS3, um automatische Rotationseffekte von Bildern zu erzielen (vollständiger Code im Anhang)" >
        <img  src="2.png" / alt="So verwenden Sie CSS3, um automatische Rotationseffekte von Bildern zu erzielen (vollständiger Code im Anhang)" >
        <img  src="3.png" / alt="So verwenden Sie CSS3, um automatische Rotationseffekte von Bildern zu erzielen (vollständiger Code im Anhang)" >
    </div>
</div>

Schritt 2: Verwenden Sie CSS3, um die Animationsbühne festzulegen

#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;
}
}

Realisieren Sie den Effekt des Bildkarussells

Weitere coole CSS3- und Javascript-Spezialeffektcodes finden Sie unter: JS-Spezialeffektsammlung

Das obige ist der detaillierte Inhalt vonSo verwenden Sie CSS3, um automatische Rotationseffekte von Bildern zu erzielen (vollständiger Code im Anhang). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!