CSS-Zusammenfassungsnotizen: Beispiele für Transformationen, Übergänge und Animationen

CSS-Zusammenfassungsnotizen: Beispiele für Transformationen, Übergänge und Animationen

1. Übergang

Verwendung der Übergangseigenschaft: Übergang: Übergangseigenschaft, Übergangsdauer, Übergangszeitfunktion   Übergangsverzögerung

Können zusammen oder getrennt angegeben werden

Übergangseigenschaft: ist die Eigenschaft, deren Übergang erfolgen soll (z. B. Breite, Höhe), „alle“ bedeutet, dass alles geändert wird.

Übergangsdauer: die benötigte Zeit in Sekunden oder Millisekunden

Übergangszeitfunktion: Gibt den Animationstyp (Bewegungskurve) an. Es gibt verschiedene Arten von Bewegungskurven:

ease=>allmählich verlangsamen (Standardwert) linear=>konstante Geschwindigkeit ease-in=>beschleunigen ease-out=>verlangsamen ease-in-out=>erst beschleunigen und dann verlangsamen

Übergangsverzögerung Verzögerungszeit, in s oder ms

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
    <Stil>
        
        div {
            Breite: 100px;
            Höhe: 200px;
            Hintergrundfarbe: Aqua;
            Übergang: Breite 2 s, Ein-/Ausstieg 0,5 s;
        }
        
        div:hover {
            Breite: 500px;
        }
    </Stil>
</Kopf>

<Text>
    <div></div>
</body>

</html>

Das Ergebnis ist wie folgt: Beim Hochbewegen der Maus erfolgt die Änderung nicht mehr augenblicklich, sondern erfolgt übergangsweise.

2. Transform

(1) 2D-Verformung

(a) Verschieben/Verschieben(x,y)

Die Verschiebung kann in Pixeln oder Prozent angegeben werden. Hinweis: Der angegebene Prozentsatz ist ein Prozentsatz der Größe der Box selbst und kann daher verwendet werden, um die Mittenausrichtung beim Positionieren der Box festzulegen (links einstellen: 50 % und dann -50 % der Box selbst verschieben).

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=, initial-scale=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
    <Stil>
        div {
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: Aqua;
            Übergang: alles 2er;
        }
        
        div:aktiv {
            transformieren: übersetzen(200px, 200px);
        }
    </Stil>
</Kopf>

<Text>
    <div></div>
</body>

</html>

Nach dem Klicken bewegt sich die Box. Der Code zum Zentrieren der positionierten Box lautet wie folgt

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
    <Stil>
        .fa {
            Breite: 300px;
            Höhe: 300px;
            Hintergrundfarbe: Aqua;
            Übergang: alle 0,5 s;
            Position: relativ;
        }
        
        .Sohn {
            Hintergrundfarbe: rot;
            Position: absolut;
            links: 50%;
            oben: 50 %;
            Breite: 100px;
            Höhe: 100px;
            transformieren: übersetzen(-50 %, -50 %);
        }

    </Stil>
</Kopf>

<Text>
    <div Klasse="fa">
        <div Klasse="Sohn"></div>
    </div>

</body>

</html>

Das Ergebnis ist

(b) Skalierung scale(x, y)

Wenn x,y größer als 1 eingestellt ist, wird hineingezoomt, wenn es kleiner als 1 ist, wird herausgezoomt.

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
    <Stil>
        div {
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: Aqua;
            Rand: 200px automatisch;
            Übergang: alles 2er;
        }
        
        div:hover {
            transformieren: Skalierung (0,5, 2);
        }
    </Stil>
</Kopf>

<Text>
    <div>

    </div>
</body>

</html>

(c) drehen (x Grad)

x gibt den Gradwert an, positive Werte erfolgen im Uhrzeigersinn und negative Werte gegen den Uhrzeigersinn.

Für die Drehung können Sie transform-origin verwenden, um den Mittelpunkt der Drehung anzugeben. Sie können auch bestimmte Pixelwerte für links oben, rechts unten angeben.

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
    <Stil>
        div {
            Breite: 200px;
            Höhe: 100px;
            Hintergrundfarbe: Aqua;
            Rand: 200px automatisch;
            Übergang: alles 2er;
            Transform-Origin: unten links;
        }
        
        div:hover {
            transformieren: drehen (120 Grad);
        }
    </Stil>
</Kopf>

<Text>
    <div></div>
</body>

</html>

(d) Neigung (x Grad, y Grad)

x,y geben den Neigungswinkel in x- und y-Richtung an, der negativ sein kann. Wenn der Y-Wert nicht angegeben ist, ist der Standardwert 0.

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
    <Stil>
        div {
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: Aqua;
            Rand: 1px durchgehend rot;
            Übergang: alles 1en;
            Rand: 200px automatisch;
        }
        
        div:hover {
            Transformation: Schrägstellung (30 Grad, 20 Grad);
        }
    </Stil>
</Kopf>

<Text>
    <div></div>
</body>

</html>

(2) 3D-Verformung

(a) Drehung (rotateX, rotateY, rotateZ)

Die 3D-Rotation ähnelt der 2D-Rotation, mit dem Unterschied, dass die eine auf zweidimensionalen Koordinaten und die andere auf dreidimensionalen Koordinaten basiert. Die drei Werte können gemeinsam oder einzeln angegeben werden.

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
    <Stil>
        div {
            Breite: 200px;
            Höhe: 100px;
            Hintergrundfarbe: Aqua;
            Rand: 200px automatisch;
            Übergang: alles 2er;
            Transform-Origin: unten links;
        }
        
        div:hover {
            transformieren: rotierenX(120 Grad);
            /* transformieren: dreheY(120 Grad); */
            /* transformieren: drehenZ(120 Grad); */
        }
    </Stil>
</Kopf>

<Text>
    <div></div>
</body>

</html>

(b) Verschieben (translateX, translateY, translateZ)

Die 3D-Bewegung ist bei Bewegungen in xy-Richtung identisch mit der 2D-Bewegung. Lediglich die Bewegung in z-Richtung ist unterschiedlich. Eine Bewegung in Z-Richtung bedeutet im wirklichen Leben, dass die Distanz größer oder kleiner wird. Daher wird das auf der Webseite angezeigte Ergebnis größer, wenn es näher ist, und kleiner, wenn es weiter weg ist.

Damit die Bewegung der Z-Achse effektiv ist, müssen Sie zunächst die Perspektive (den Abstand zwischen Auge und Bildschirm) festlegen.

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
    <Stil>
        Körper {
            Perspektive: 1000px;
            /* Je kleiner der Wert, desto näher sind die Augen*/
        }
        
        div {
            Breite: 200px;
            Höhe: 200px;
            Hintergrundfarbe: Aqua;
            Übergang: alle 0,5 s;
            Rand: 200px automatisch;
        }
        
        div:hover {
            transformieren: übersetzen3d(0, 0, 200px);
        }
    </Stil>
</Kopf>

<Text>
    <div>

    </div>
</body>

</html>

3. Animation

(1), Animation: Animationsname || Animationsdauer || Animationstimingfunktion || Animationsverzögerung || Animationsiterationsanzahl || Animationsrichtung || Animationsfüllmodus ;

animation-name: Name der Animation (von Ihnen selbst mit @keyframes definierte Animation)

Animationsdauer: Dauer

Animations-Timing-Funktion: Bewegungskurve, ähnlich der Bewegungskurve des Übergangs.

Animationsverzögerung: Verzögerungszeit

animation-iteration-count: Anzahl der Schleifen (unendlich ist eine Endlosschleife)

Animationsrichtung: ob sie umgekehrt ist (ob die Animation am Ende beginnt und rückwärts abgespielt wird)

Animationsfüllmodus: Setzt den Zustand außerhalb der Animationswiedergabe (den Zustand am Ende). Keiner | Vorwärts (auf den Zustand am Ende setzen) | Rückwärts (auf den Zustand am Anfang setzen) | Beide (auf den Zustand am Anfang oder Ende setzen)

animation-play-state: Setzt den Animationsstatus running start|paused pause

(2) @keyframes benutzerdefinierte Animation

Das Format ist wie folgt

@keyframes Animationsname {
ab{start} 0%
bis {Ende} 100 %
}

Sie können „von ... bis“ verwenden, um den Animationsprozess anzugeben, oder Sie können „0 % ~ 100 %“ verwenden, um den Animationsprozess anzugeben.

<!DOCTYPE html>
<html lang="de">

<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <meta http-equiv="X-UA-kompatibel" content="ie=edge">
    <title>Dokument</title>
    <Stil>
        div {
            Breite: 100px;
            Höhe: 100px;
            Hintergrundfarbe: Aqua;
            /* Animation: Animationsname, Animationszeit, Bewegungskurve, Startzeit, Wiedergabezeiten, ob in die entgegengesetzte Richtung abgespielt werden soll*/
            Animation: Bewegung 5 s linear 3;
        }
        
        @keyframes verschieben {
            0% {
                transformieren: übersetzen3d(0, 0, 0);
            }
            25 % {
                transformieren: übersetzen3d(400px, 0, 0);
            }
            50 % {
                transformieren: übersetzen3d(400px, 300px, 0);
            }
            75 % {
                transformieren: übersetzen3d(0, 300px, 0);
            }
            100 % {
                transformieren: übersetzen3d(0, 0, 0);
            }
        }
    </Stil>
</Kopf>

<Text>
    <div></div>
</body>

</html>

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  Das MySQL-Passwort enthält Sonderzeichen und den Anmeldevorgang über die Befehlszeile

>>:  Verwenden Sie Vue3 zur Datenbindung und Anzeigelistendaten

Artikel empfehlen

Wie kompliziert ist die Priorität von CSS-Stilen?

Gestern Abend habe ich mir eine Interviewfrage ang...

React-Implementierungsbeispiel mit Amap (react-amap)

Die PC-Version von React wurde für die Verwendung...

Natives js zur Realisierung der Bild-Upload-Steuerung

In diesem Artikelbeispiel wird der spezifische Co...

Eine kurze Erläuterung zur Verwendung von Slots in Vue

Definition und Verwendung: Verwenden Sie die Slot...

MySQL-Trigger: ausführliche Erklärung und einfaches Beispiel

Einfaches Beispiel für einen MySQL-Trigger Gramma...

MySQL-Performance-Optimierung: So nutzen Sie Indizes effizient und richtig

Die Praxis ist der einzige Weg, die Wahrheit zu t...

So verwenden Sie VUE und Canvas, um ein Thunder Fighter-Tippspiel zu implementieren

Heute werden wir ein Thunder Fighter-Tippspiel im...

So legen Sie MySQL-Fremdschlüssel für Anfänger fest

Inhaltsverzeichnis Die Rolle von Fremdschlüsseln ...

Protokollieren Sie ein langsames Abfrageereignis, das durch eine Fehleinschätzung des Online-MySQL-Optimierers verursacht wurde.

Vorwort: Ich habe Warnungen zu wahnsinnig langsam...

Zen-Codierung für Editplus – Beispielcodebeschreibung

Er gibt beispielsweise ein: XML/HTML Code div#Seit...

Was bedeutet das n nach int(n) in MySQL?

Sie wissen vielleicht bereits, dass die Länge 1 v...

CSS3 benutzerdefinierter Bildlaufleistenstil::webkit-scrollbar Beispielcode, ausführliche Erklärung

Der standardmäßige Bildlaufleistenstil in Windows...

Eine kurze Diskussion über die richtige Haltung der Tomcat-Speicherkonfiguration

1. Hintergrund Obwohl ich viele Blogs und Artikel...

Erste Schritte mit MySQL Sharding

Vorwort Relationale Datenbanken werden eher zu Sy...

Eine kurze Diskussion zum Thema Ziehen und Sortieren von Elementen in Tabellen

In letzter Zeit stoße ich bei der Verwendung von ...