Heim > Artikel > Web-Frontend > Ausführliche Erläuterung, wie man mithilfe von CSS3-Animationseigenschaften Karusselleffekte erzielt
Das Animationsattribut von CSS3 kann verwendet werden, um jeden Schritt der Animation zu steuern, indem Schlüsselbilder genau wie bei Flash-Animationen gesteuert werden, wodurch komplexere Animationseffekte erzielt werden. In diesem Artikel werde ich den auf CSS3-Animationseigenschaften basierenden Karusselleffekt mit Ihnen teilen. Freunde, die ihn benötigen, können sich auf
Animationseinführung beziehen:
Das Animationsattribut von CSS3 kann jeden Schritt der Animation steuern, indem es Schlüsselbilder steuert, um komplexere Animationseffekte zu erzielen, genau wie bei Flash-Animationen. Der durch Ainimation erzielte Animationseffekt besteht hauptsächlich aus zwei Teilen:
1) Deklarieren Sie eine Animation über Frames, die denen in Flash-Animationen ähneln.
2) Rufen Sie die durch Schlüsselframes in der Animation deklarierte Animation auf Attribut.
Animationsattributwert:
Animationsattribut ist ein Kurzschriftattribut
Syntax: Animation: Name Dauer Timing-Funktionsverzögerung Richtung der Iterationsanzahl;
Die sechs von der Animation festgelegten Animationsattribute:
Animationsname: Gibt den Keyframe an, an den gebunden werden muss der Selektorname. Werte:
none: (Standard) Gibt keinen Animationseffekt an (kann zum Überschreiben von Animationen aus Kaskaden verwendet werden).
keyframename: Gibt den Namen des Keyframes an, der an den Selektor gebunden werden muss.
animation-duration: Gibt die Zeit an, die zum Abschließen der Animation benötigt wird, in Sekunden oder Millisekunden. Wert:
Zeit: Gibt die Zeit an, die zum Abschließen der Animation benötigt wird. Der Standardwert ist 0, was bedeutet, dass kein Animationseffekt vorliegt.
animation-timing-function: Gibt die Geschwindigkeitskurve der Animation an. Wert:
ease: Standard. Die Animation beginnt langsam, beschleunigt dann, verlangsamt sich dann und endet schließlich.
linear: Die Animationsgeschwindigkeit ist von Anfang bis Ende gleich.
ease-in: Die Animation startet mit niedriger Geschwindigkeit.
ease-out: Die Animation endet mit niedriger Geschwindigkeit.
ease-in-out: Die Animation beginnt und endet mit langsamer Geschwindigkeit.
cubic-bezier(n,n,n,n): Definieren Sie Ihre eigenen Werte in der Kubik-Bezier-Funktion. Mögliche Werte sind numerische Werte von 0 bis 1.
animation-delay: Gibt die Verzögerung vor dem Start der Animation an. Werte:
time: (optional) Definiert die Zeit, die vor dem Start der Animation gewartet werden soll, in Sekunden oder Millisekunden. Der Standardwert ist 0.
animation-iteration-count: Gibt an, wie oft die Animation abgespielt werden soll. Wert:
n: Definiert die Anzahl der Animationswiedergabezeiten.
unendlich: Gibt an, dass die Animation unendlich abgespielt werden soll.
animation-direction: Gibt an, ob die Animation der Reihe nach rückwärts abgespielt werden soll. Werte:
normal: Standardwert. Die Animation sollte normal abgespielt werden.
alternativ: Die Animation sollte der Reihe nach rückwärts abgespielt werden.
Karussell zur Implementierung von Animationsanimationen
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>图片轮换</title> <style type="text/css"> p,img{ margin: 0; padding: 0; } .p_first{ width: 1000px; height: 300px; margin-top: 100px; margin-left: 250px; overflow: hidden; } .p_second{ width: 4000px; position: relative; animation: myimg 12s linear infinite normal; } @keyframes myimg{ 0{ left: 0; } 5%{ left: 0; } 30%{ left: -1000px; } 35%{ left: -1000px; } 60%{ left: -2000px; } 65%{ left: -2000px; } 95%{ left: -3000px; } 100%{ left: -3000px; } } </style> </head> <body> <p class="p_first"> <p class="p_second"> <img src="images/011-1.jpg" alt=""><img src="images/011-2.jpg" alt=""><img src="images/011-3.jpg" alt=""><img src="images/011-1.jpg" alt=""> </p> </p> </body> </html>
Bild-Tags sollten in derselben Zeile platziert werden, da sonst Lücken zwischen den Bildern entstehen.
Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung, wie man mithilfe von CSS3-Animationseigenschaften Karusselleffekte erzielt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!