简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  Implementierung der kreisförmigen Bewegungsbahn in der CSS3-Animation

Implementierung der kreisförmigen Bewegungsbahn in der CSS3-Animation

一个新手
一个新手Original
2017-10-20 09:32:133944Durchsuche

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Über die relative Funktion in CSSNächster Artikel：Über die relative Funktion in CSS

In Verbindung stehende Artikel

Mehr sehen