CSS realisiert den Animationseffekt der parabolischen Bewegung des Balls (Code)

Der Inhalt dieses Artikels befasst sich mit dem Animationseffekt (Code) der Realisierung der parabolischen Bewegung des Balls. Ich hoffe, dass er einen gewissen Referenzwert hat wird Ihnen nützlich sein.

Damit ein Objekt eine parabolische Bewegung erreichen kann, wird das Objekt physikalisch in horizontale Bewegung (gleichmäßige Geschwindigkeit) und vertikale Bewegung (Beschleunigung) unterteilt. Für die Verwendung dieses Elements sind zwei Ebenen erforderlich. Eine Ebene steuert die Horizontale und eine Ebene steuert die Vertikale. In CSS3 kann die Geschwindigkeit über die Bezier-Kurve oder die Animations-Timing-Funktion eingestellt werden Für die vertikale Bewegung sind unterschiedliche Einstellungen festgelegt. Mit der Bessel-Formel können verschiedene gekrümmte Bewegungen wie Aufwärtswerfen, Flachwerfen und Drehen erzielt werden.

Implementiert hauptsächlich den folgenden HTML-Teil mit zwei Schichten von Divs, einer zur Steuerung der horizontalen Bewegung und einer zur Steuerung der vertikalen Bewegung.

    <div class="wraper">         <!--控制竖直运动-->
        <div class="item"></div> <!--控制水平运动-->
    </div>
    <div class="item2"></div>

Es ist auch relativ einfach, horizontale und vertikale Bewegungsanimationen direkt festzulegen Animieren Sie sie. Die Einstellungen von

rrree

Die Steigung der Bezier-Kurve ist die Bewegungsgeschwindigkeit des Objekts entsprechend unterschiedlicher Steigungen

Verwandte Empfehlungen:

html5 simuliert eine flache Wurfbewegung (simuliert den flachen Wurfbewegungsprozess eines kleinen Balls)_html5-Tutorial-Fähigkeiten

Verwendung reines CSS, um einen Sanduhr-Animationseffekt zu erzielen

Das obige ist der detaillierte Inhalt vonCSS realisiert den Animationseffekt der parabolischen Bewegung des Balls (Code). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!