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
Detaillierte Schritte zum manuellen Konfigurieren der IP-Adresse in Linux
Inhaltsverzeichnis 1. Geben Sie zuerst das Konfig...
Detaillierte Erläuterung zur Verwendung der WeChat-Miniprogrammkarte
In diesem Artikelbeispiel wird der spezifische Im...
So umbrechen Sie das HTML-Titelattribut
Als ich vor ein paar Tagen ein Programm schrieb, w...
So legen Sie Remotezugriffsberechtigungen in MySQL 8.0 fest
Im vorherigen Artikel wurde erklärt, wie man das ...
Detaillierte Erklärung der MySQL 30-Militärregeln
1. Grundlegende Spezifikationen (1) Es muss die I...
So finden Sie identische Dateien in Linux
Während der Nutzung des Computers entsteht im Sys...
Lösung für das Problem der verstümmelten Webseiten, wenn die Kodierung auf UTF-8 eingestellt ist
Als ich kürzlich Webseiten mit PHP schrieb, habe i...
Acht Hook-Funktionen in der Vue-Lebenszykluskamera
Inhaltsverzeichnis 1. beforeCreate und erstellte ...
Detaillierte Erläuterung der Installation von jdk1.8 und der Konfiguration von Umgebungsvariablen in einer Linux-ähnlichen Umgebung
Die Konfiguration ist sehr einfach, aber ich muss...
JavaScript Dom implementiert das Prinzip und Beispiel eines Karussells
Wenn wir ein Karussell bauen wollen, müssen wir z...
Leitfaden zu bewährten Methoden für die Benutzerautorisierung im WeChat Mini-Programm
Vorwort Bei der Entwicklung von WeChat-Applets mü...
JavaScript-Closures erklärt
Inhaltsverzeichnis 1. Was ist ein Abschluss? 1.2 ...
Zusätzliche Anweisungen zur Verwendung von Gettern und Aktionen in Vuex
Vorbemerkungen 1.Unterschiede zwischen Vue2.x und...
Einführung in das Methodenattribut des Formularformulars in HTML
1 Methode ist eine Eigenschaft, die angibt, wie Da...
Better-Scroll realisiert den Effekt der Verknüpfung von Menü und Inhalt
1. Grundlegende Verwendung <!DOCTYPE html> ...