CSS3-Beispielcode zum Erreichen einer Elementbogenbewegung
|
So verwenden Sie CSS, um die Bogenbewegung von Elementen zu steuern Wir alle wissen, dass der neue Übergangseffekt „Attribut Transform“ von CSS3 eine Elementverschiebung, -drehung und -skalierung erreichen kann. In Kombination mit dem Animationsattribut können Sie den Animationseffekt des Elements erzielen. Aber wie kann man mit CSS eine Bogenbewegung von Elementen erreichen:
Wie in der Animation oben gezeigt, bewegt sich der Ball in einem Bogen. Analysieren Sie die Bewegung:
Kubische Bézier-Funktion In der Animationseigenschaft gibt es eine Animation-Timing-Function-Eigenschaft, die die Geschwindigkeitsfunktion der Animation ist. Diese Eigenschaft verwendet eine mathematische Funktion namens „kubische Bézier-Funktion“, um die Geschwindigkeitskurve zu generieren.
kubische Bézierfunktion (x1, y1, x2, y2): (Die genaue Bedeutung der kubischen Bézierfunktion finden Sie in den entsprechenden Materialien):
Über dieses Website-Portal können Sie den Kurvenwert in Echtzeit anpassen. Das Attribut „animation-timing-function“ stellt bereits mehrere vorgefertigte Geschwindigkeitsfunktionen bereit: „ease“, „linear“, „ease-in“, „ease-out“ und „ease-in-out“, die wir häufig verwenden.
Effektrealisierung Als Erstes fällt uns die Trennung der Verschiebungsanimation der X- und der Y-Achse ein. Allerdings kann die Animation eines Elements immer nur eine Animation (die zuletzt deklarierte) gleichzeitig ausführen. Wir können also aus einer anderen Perspektive denken und zwei über- und untergeordnete Elemente verwenden. Fügen Sie dem übergeordneten Element eine X-Achsen-Verschiebungsanimation und dem untergeordneten Element eine Y-Achsen-Verschiebungsanimation hinzu. Der spezifische Code lautet wie folgt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Elementbogenbewegung</title>
<Stil>
.Kasten{
Breite: 400px;
Höhe: 400px;
Rand: 2px durchgezogen #ff8800;
}
Spanne{
Anzeige: Block;
Breite: 40px;
Höhe: 40px;
Rand: 1px durchgezogen #222;
Animation: Mitte1, 2 s, nach vorne einsteigen;
}
Spanne:nach{
Inhalt: '';
Anzeige: Block;
Breite: 40px;
Höhe: 40px;
-Webkit-Randradius: 20px;
-moz-Randradius: 20px;
Rahmenradius: 20px;
Hintergrund: grüngelb;
Animation: Mitte2, 2 s nach vorne ausfahren;
}
@keyframes center1 {
zu {transform: translateX(360px)}
}
@keyframes center2 {
zu {transform: translateY(360px)}
}
</Stil>
</Kopf>
<Text>
<div Klasse="Box">
<span></span>
</div>
</body>
</html>Zu diesem Zeitpunkt habe ich die Pseudoklasse des Elements verwendet, um das untergeordnete Element zu ersetzen, und der Effekt ist der gleiche. Wenn Sie span einen farbigen Rahmen geben, können Sie die Bewegungsbahnen der beiden Elemente leichter beobachten. Der Animationseffekt ist wie folgt:
Zu diesem Zeitpunkt ist noch relativ deutlich zu erkennen, dass sich die grüne Kugel bogenförmig bewegt. Erweiterungen: Wenn Sie das Gefühl haben, dass der Bogen zu diesem Zeitpunkt nicht groß genug oder deutlich genug ist, können wir den Wert der kubischen Bézier-Funktion selbst anpassen. Laut Website-Portal.
Der CSS-Code lautet derzeit wie folgt:
Spanne{
Anzeige: Block;
Breite: 40px;
Höhe: 40px;
Rand: 1px durchgezogen #222;
Animation: Mitte1 2s Kubik-Bézier(.66,.01,1,1) vorwärts;
}
Spanne:nach{
Inhalt: '';
Anzeige: Block;
Breite: 40px;
Höhe: 40px;
-Webkit-Randradius: 20px;
-moz-Randradius: 20px;
Rahmenradius: 20px;
Hintergrund: grüngelb;
Animation: Mitte2 2s Kubik-Bézier(0,0,.36,1) vorwärts;
} Der Bogen des Animationseffekts ist zu diesem Zeitpunkt noch deutlicher:
Damit ist dieser Artikel über Beispielcode zur Implementierung von Elementbogenbewegungen mit CSS3 abgeschlossen. Weitere relevante Inhalte zu CSS3-Elementbogenbewegungen finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Informationen zu UDP in Linux
Artikel empfehlen
CSS-Lösung für mehrspaltiges Layout
1. Feste Breite + adaptiv Erwarteter Effekt: fest...
Beispielcode zur Implementierung von dynamischem Skinning mit vue+element
Manchmal kann das Thema eines Projekts nicht jede...
So implementieren Sie Sveltes Defer Transition in Vue
Ich habe mir vor Kurzem Rich Harris‘ Video „Rethi...
js-Entwicklungs-Plugin zum Erzielen eines Tab-Effekts
In diesem Artikelbeispiel wird der spezifische Co...
Implementierung zum Hinzufügen von Bemerkungsinformationen zu MySQL
Vorwort Einige Leute haben mich in diesen Tagen u...
Einfache Verwendung des Vue-Busses
Einfache Verwendung des Vue-Busses Beschreibung d...
Unterschiede zwischen den Windows Server-Systemversionen win2003, win2008R2, win2012, win2016 und win2019
Kürzlich hat Microsoft das Serversystem 2019 verö...
Was tun, wenn der Auto-Increment-Primärschlüssel in MySQL aufgebraucht ist?
Im Vorstellungsgespräch sollten Sie folgende Szen...
W3C Tutorial (3): W3C HTML Aktivitäten
HTML ist eine Hybridsprache, die zum Veröffentlic...
Detaillierte Erklärung der node.js-Installation und HbuilderX-Konfiguration
Tutorial zur npm-Installation: 1. Laden Sie das N...
Detaillierte Erklärung des JS-Browser-Ereignismodells
Inhaltsverzeichnis Was ist ein Ereignis Ein einfa...
Eine vollständige Liste gängiger Linux-Systembefehle für Anfänger
Das Erlernen von Linux-Befehlen stellt für die me...
Detailliertes Tutorial-Diagramm zur Installation der dekomprimierten Version von MySQL5.7.21
Da ich das System häufig installiere, muss ich na...
HTML (CSS-Stilspezifikation) muss lauten
CSS-Stilspezifikationen 1. Klassenauswahl 2. Tag-...
jQuery implementiert die Drop-Down-Box zur Auswahl des Wohnortes
Der spezifische Code für die Verwendung von jQuer...