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

Ein Beispiel für die dynamische Implementierung verschiedener Datenstile in einer Spalte der el-Tabelle des Elements ui

Problembeschreibung Im Rahmen der Ele.me-Benutzer...

Lernen Sie die schwarze Technologie der Union-All-Verwendung in MySQL 5.7 in 5 Minuten

Leistung von „Union All“ in MySQL 5.6 Teil 1: MyS...

Sprechen Sie darüber, wie HTML-Escapezeichen durch Code identifiziert werden können.

Gelegentlich werden Sie in den Daten Zeichen wie ...

So verwenden Sie GeoIP, um Regionen in Nginx einzuschränken

Dieser Blog ist eine Arbeitsnotiz Umfeld: Nginx-V...

Optimierung des MySQL Thread_Stack-Verbindungsthreads

MySQL kann nicht nur über das Netzwerk, sondern a...

Lösung zum automatischen Neustart von MySQL

Vorwort Kürzlich trat in der Testumgebung ein Pro...

So verwenden Sie Provide zur Implementierung der Statusverwaltung in Vue3

Inhaltsverzeichnis Vorwort So implementieren Sie ...

Verwenden von MySQL unter Windows: Implementieren automatischer zeitgesteuerter Sicherungen

1. Schreiben Sie ein Backup-Skript rem Autor:www....

Einstellungen für den Ubuntu-Boot-Autostart-Dienst

So erstellen Sie einen Dienst und starten ihn aut...

Rückblick auf die besten Webdesign-Arbeiten 2012 [Teil 1]

Zum Beginn des neuen Jahres möchte ich meinen Fre...

Detaillierte Erläuterung des Rundungsgenauigkeitsproblems der toFixed () -Methode in JS

Inhaltsverzeichnis Die Fallstricke Füllmethode Wa...

So erstellen Sie schnell eine LNMP-Umgebung mit Docker (neueste Version)

Vorwort Tipp: Hier können Sie den ungefähren Inha...

Beispiel für die Konvertierung von Spark RDD in einen Dataframe und das Schreiben in MySQL

Dataframe ist eine neue API, die in Spark 1.3.0 e...

So erstellen Sie ein Docker-Repository mit Nexus

Das mit dem offiziellen Docker-Register erstellte...

Zusammenfassung zum Erstellen und Verwenden von Array-Methoden in Bash-Skripten

Definieren eines Arrays in Bash Es gibt zwei Mögl...