Heim >Web-Frontend >CSS-Tutorial >Das Animationsattribut implementiert direkt die Karussellmethode
Das Animationsattribut implementiert direkt die Karussellmethode
- php中世界最好的语言Original
- 2018-03-21 11:56:491545Durchsuche
Dieses Mal werde ich Ihnen die Methode zur direkten Implementierung von Karussells mit Animationsattributen vorstellen. Was sind die Vorsichtsmaßnahmen für die Implementierung von Karussells mit Animationsattributen?
Animationseinführung:
Die Animationseigenschaft von CSS3 kann verwendet werden, um jeden Schritt der Animation zu steuern, indem Schlüsselbilder genau wie bei Flash-Animationen gesteuert werden . Komplexere Animationseffekte. 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 iteration-count direction;
Die sechs Animationsattribute, die durch die Animation festgelegt werden:
animation-name: legt fest, dass dies der Fall ist muss gebunden werden. Der dem Selektor zugewiesene Keyframe-Name. 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.
Karussellbild zur Implementierung einer Animationsanimation
<!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.
Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website !
Empfohlene Lektüre:
Detaillierte Erklärung der Verwendung von Zeigerereignissen in CSS3
Detaillierte Erklärung der Verwendung von Fokus-innerhalb
Das obige ist der detaillierte Inhalt vonDas Animationsattribut implementiert direkt die Karussellmethode. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!