Wie implementiert man ein Karusselldiagramm in CSS3? So implementieren Sie Karussellbilder in CSS3

Wir sehen oft eine Stelle auf einer Webseite, an der viele Bilder hin- und herwechseln. Das Karussellbild ermöglicht die Anzeige wichtiger Informationen an einer Stelle Wie wird es erreicht? Das Karusselldiagramm kann mit js oder css realisiert werden. In diesem Artikel erfahren Sie, wie Sie den Karusselldiagrammeffekt mit css3 erzielen.

CSS3 kann CSS3-Animationseigenschaften und @keyframes-Regeln verwenden, um Karusselleffekte zu implementieren.

Animation besteht hauptsächlich aus zwei Teilen, um Animationseffekte zu erzielen:
1. Deklarieren Sie eine Animation durch Frames, die denen in Flash-Animationen ähneln.
2 .

Animationsattribut ist ein Kurzschriftattribut (empfohlener Videokurs: CSS-Tutorial)

Syntax: Animation: Name Dauer Timing-Funktion Verzögerung Iteration-Zählung Richtung.

Der Animationsattributwert wird hier nicht eingeführt. Bei Bedarf können Sie auf das CSS-Handbuch zurückgreifen.

Schauen wir uns ein Beispiel an:

html:

<div id="container">
    <div id="photo">
        <img src="http://img.zcool.cn/community/0117e2571b8b246ac72538120dd8a4.jpg@1280w_1l_2o_100sh.jpg" />
        <img src="http://img.zcool.cn/community/01b34f58eee017a8012049efcfaf50.jpg@1280w_1l_2o_100sh.jpg" />
        <img src="http://img.zcool.cn/community/01c60259ac0f91a801211d25904e1f.jpg@1280w_1l_2o_100sh.jpg" />
    </div>
</div>

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

Beschreibung:

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

Fügen Sie dem Bild einen Float-Effekt hinzu, ohne das lästige Randproblem berücksichtigen zu müssen

Da das Beispiel nur drei hat Bilder, drei Animationsstufen werden hinzugefügt, jede Stufe erzielt den Umschalteffekt durch Festlegen eines zunehmenden Rand-Links-Werts

Die eingestellte Animationsstufe (zum Beispiel: 35 % ~ 60 %) ist der Verweilzeitteil der Animation. 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.

In diesem Artikel wird kurz die Implementierung des CSS-Karusselleffekts vorgestellt. Weitere Informationen zum Effekt des CSS-Karussells finden Sie im Spezialeffekt-Download auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

CSS3 zur Implementierung einfacher Karussellbilder

Implementierung der Bootstrap-Bildkarussellfunktion

jQuery implementiert den Bildkarussell-Diashow-Effekt

Das obige ist der detaillierte Inhalt vonWie implementiert man ein Karusselldiagramm in CSS3? So implementieren Sie Karussellbilder in CSS3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!