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:

Wenn wir die Bewegung des Balls in zwei Bewegungen aufteilen, die X-Achse und die Y-Achse, bewegt sich der Ball auf der X-Achse mit einer Geschwindigkeit von (langsam-schnell);
Der Ball bewegt sich mit einer Geschwindigkeit von (schnell-langsam) entlang der Y-Achse.
Kombinieren Sie die Bewegung zweier Achsen, um einen Bogeneffekt zu erzielen

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.

Wählen Sie den Ease-In-Kurveneffekt aus. Nun ändern wir die Werte von x1 und y1 (den roten Punkt nach rechts ziehen). Kopieren Sie dann an dieser Stelle den cubic-bezier()-Wert. Ersetzen Sie die Ease-In-Position der Animation des ursprünglichen Bereichs durch diesen Wert.
Wählen Sie den Ease-Out-Kurveneffekt aus. Nun ändern wir die Werte von x2 und y2 (den blauen Punkt nach rechts ziehen). Kopieren Sie dann an dieser Stelle den cubic-bezier()-Wert. Ersetzen Sie die ursprüngliche Span-Pseudoklasse nach der Ease-Out-Position der Animation durch diesen Wert.

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

>>: Leitfaden für Anfänger zum Erstellen einer Website ⑦: Es ist so einfach, eine schöne Website zu erstellen

Einige CSS-Fragen, die Ihnen während eines Vorstellungsgesprächs gestellt werden könnten

CSS3-Beispielcode zum Erreichen einer Elementbogenbewegung

Einige CSS-Fragen, die Ihnen während eines Vorstellungsgesprächs gestellt werden könnten

Detaillierte Erklärung des Sandbox-Mechanismus von Vue3

So stellen Sie ein SpringBoot-Projekt mit Dockerfile bereit

Lösung zur Deinstallation von Python und Yum im CentOs-System

So ändern Sie MySQL-Berechtigungen, um Hosts den Zugriff zu ermöglichen

Einigen Eigenschaften in CSS geht ein "*" oder "_" voraus.

Vergleich der von der MySQL-Datenbank unterstützten Speicher-Engines

Detaillierte Erklärung zur Verwendung von nohup /dev/null 2>&1

Hintergrundbild-Cache unter IE6

Detaillierte Erklärung des Pufferpools in MySQL

Artikel empfehlen

Informationen zur Verwendung der Vue v-on-Direktive

Nginx: Ein Domänenname für den Zugriff auf mehrere Projekte – Methodenbeispiel

So unterstützen Sie vollständiges Unicode in MySQL/MariaDB

Optimierung der Web-Frontend-Leistung

Vergleich mehrerer Beispiele zur Einfügungseffizienz in MySQL

Tutorial zur Installation von MySQL mit Docker und zur Implementierung einer Remote-Verbindung

Detaillierte Erläuterung des Installations- und Konfigurationsprozesses von mysql8.018 unter Linux

Die Tücken der automatischen Inkrementierung numerischer MySQL-Typen

So erstellen Sie einen Flammeneffekt mit CSS

MySQL verwendet inet_aton und inet_ntoa, um IP-Adressdaten zu verarbeiten

Initialisieren Sie Ubuntu 16.04 in drei Minuten und stellen Sie Java-, Maven- und Docker-Umgebungen bereit

So verwenden Sie den Linux-Befehl whatis

Der Unterschied zwischen clientWidth, offsetWidth, scrollWidth in JavaScript

Probleme beim Erstellen von Platzhaltern für HTML-Auswahlfelder

Detaillierte Erläuterung der benutzerdefinierten Anweisungen für die Vue.js-Direktive