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
Tutorial zur Installation von Ubuntu 1804 in VMware Workstation 15 Pro (mit Bildern und Text)
Dieser Hinweis ist ein Installationstutorial. Er ...
5 äußerst nützliche Open-Source-Docker-Tools, die dringend empfohlen werden
Einführung Die Docker-Community hat viele Open-So...
Detaillierte Erläuterung des Lazy Loading und Preloading von Webpack
Inhaltsverzeichnis Normale Belastung Lazy Loading...
Schiebemenü mit CSS3 implementiert
Ergebnis:Implementierungscode: <!DOCTYPE html&...
61 Dinge, die jeder Webentwickler wissen sollte
Normalerweise müssen Sie die Reden aller Teilnehme...
Detaillierte Erläuterung des Beispiels zum Exportieren von Daten aus einer angegebenen Tabelle in MySQL
Detaillierte Erklärung zum MySQL-Export von Daten...
Detaillierte Erklärung der Überwachungseigenschaften von Vue
Inhaltsverzeichnis Vue-Monitoreigenschaften Was i...
Detaillierte Erklärung zum Ändern des Standardports von nginx
Finden Sie zunächst heraus, wo sich die Konfigura...
Erfahren Sie mehr über den MySQL-Ausführungsplan
Inhaltsverzeichnis 1. Einführung in den Implement...
Code zur Implementierung eines einfachen Pfeilsymbols mit Div+CSS in HTML
Beim Webdesign verwenden wir Pfeile oft als Dekor...
So kopieren Sie eine MySQL-Tabelle
Inhaltsverzeichnis 1.mysqldump Ausführungsprozess...
mysql5.7 Installations- und Konfigurationstutorial unter Centos7.3
In diesem Artikel finden Sie das Installations- u...
MySQL-Einstellungscode für die grüne Version und Details zum Fehler 1067
MySQL-Einstellungscode für grüne Version und Fehl...
Eine kurze Diskussion über MySQL-Backup und -Wiederherstellung für eine einzelne Tabelle
A. Installation des MySQL-Sicherungstools xtrabac...
Vue verwendet die Element-el-upload-Komponente, um auf die Grube zu treten
Inhaltsverzeichnis 1. Grundlegende Verwendung 2. ...