Heim > Artikel > Web-Frontend > Ausführliche Erläuterung, wie man mithilfe von CSS3-Animationseigenschaften Karusselleffekte erzielt
Ausführliche Erläuterung, wie man mithilfe von CSS3-Animationseigenschaften Karusselleffekte erzielt
- 巴扎黑Original
- 2018-05-18 10:57:484353Durchsuche
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!