Heim >Web-Frontend >CSS-Tutorial >Implementierung der kreisförmigen Bewegungsbahn in der CSS3-Animation
Implementierung der kreisförmigen Bewegungsbahn in der CSS3-Animation
- 一个新手Original
- 2017-10-20 09:32:134082Durchsuche
In CSS3 wird die Animation über @keyframes definiert und die Animation legt Animationsattribute fest, um Animationseffekte zu erzielen.
Im Animationsattribut können Sie den Namen der Animation und die Laufzeit der gesamten Animation angeben , die Geschwindigkeitskurve der Bewegung und andere Verzögerungszeiten, Spielzeiten usw.
Animation
Animation umfasst als zusammengesetztes Attribut die folgenden Animationsattribute.
Animationsname ---------------------------------- - -Gibt den Animationsnamen an
Animationsdauer ------------------------------- -- ---Geben Sie die Zeit an, zu der die Animation einmal abgeschlossen werden soll
animation-timing-function ------------------- ------Animation angeben Bewegungsgeschwindigkeitskurve
Animationsverzögerung ------------------------ ---------- -----Geben Sie die Verzögerungszeit der Animation an
animation-iteration-count ------------ ----------- Geben Sie die Anzahl der Animationswiedergaben an
Animationsrichtung ----- --------------- Gibt an, ob die Animation im nächsten Zyklus rückwärts gestartet wird
animation-fill-mode ------ --------------------- ------Zustand außerhalb der angegebenen Animationszeit
animation-play-state -------------------------- ----------Gibt das Ausführen und Anhalten der Animation an
animation-timing-function
Gibt die Geschwindigkeitskurve der Animation an. Der Standardwert ist "ease". Zu den häufig verwendeten Bewegungsgeschwindigkeitskurven gehören die folgenden:
linear: linearer Übergang.
Einstieg: von langsam nach schnell.
ease-out: von schnell nach langsam.
ease-in-out: von langsam über schnell zu wieder langsam.
Sie können die Bezier-Kurve auch direkt verwenden, um die Laufgeschwindigkeitskurve anzugeben. Die vier Werte der Bezier-Kurve müssen innerhalb der [0, 1] liegen. Intervall.
Animationsrichtung
Gibt an, ob die Animation im nächsten Zyklus rückwärts abgespielt wird. Der Standardwert ist „normal“.
rückwärts: in die entgegengesetzte Richtung bewegen
abwechselnd: zuerst in die normale Richtung und dann in die umgekehrte Richtung bewegen und dabei weiter abwechseln
-
Alternate-Reverse: Bewegen Sie sich zuerst in die umgekehrte Richtung und dann in die normale Richtung, kontinuierlich abwechselnd
Animationsfüllmodus
Zustand außerhalb der angegebenen Objektanimationszeit. Häufig verwendete Werte sind wie folgt:
none: Standardwert
forwards: Setzt den Objektstatus auf den Status am Ende von die Animation
rückwärts: Setzt den Objektzustand auf den Zustand, wenn die Animation beginnt
Kreisbewegungsbahn
Die Implementierung Der Code lautet wie folgt:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>沿圆形轨迹运动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
}
#trajectory {
width: 300px;
height: 300px;
border: 4px solid #949494;
border-radius: 50%;
position: relative;
left: calc(50% - 153px);
top:calc(50% - 153px);
}
@keyframes moveX{
0% {left: -22px;}
100% {left: 282px;}
}
@keyframes moveY{
0% {top: -22px;}
100% {top: 282px;}
}
#move {
width: 40px;
height: 40px;
font-size: 12px;
background-color: #32c33a;
border-radius: 50%;
position: absolute;
left:-22px;
top:-22px;
animation: moveX 4s cubic-bezier(0.36,0,0.64,1) -2s infinite alternate, moveY 4s cubic-bezier(0.36,0,0.64,1) 0s infinite alternate;
}
</style></head><body>
<p id="trajectory">
<p id="move">Immortal brother</p>
</p></body></html>Die im obigen Code zu beachtenden Punkte lauten wie folgt:
Der Grund für die Einstellung der Körpergröße auf 100 % ist folgender Die Standardhöhe des Körpers in der HTML5-Umgebung beträgt 0
Bei Verwendung von calc sind die Leerzeichen an beiden Enden des „-“ und „+“ zwischen den Werten unerlässlich
Die linken und oberen Werte in der Animation sind der Beginn der Bewegung des Objekts. Position und Endposition, bitte achten Sie auf den Randwert
Die Bewegungsbahn der gleichzeitig ausgeführten Animation beträgt nur die Hälfte der Bewegung
Geschwindigkeitskurve: Kubikbezier (0,36,0,0,64,1);
Einstellung der Verzögerungszeit in beide Richtungen
Das obige ist der detaillierte Inhalt vonImplementierung der kreisförmigen Bewegungsbahn in der CSS3-Animation. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!