CSS3-Übergangsrotationsperspektive, 2D3D-Animation und andere Effektbeispielcodes

Ich habe gerade herausgefunden, wie nützlich CSS3 ist ...

CSS3-Boxmodell

In CSS3 kann das Boxmodell durch die Boxgröße angegeben werden. Es gibt zwei Werte, die als Inhaltsbox und Rahmenbox angegeben werden können. Dies ändert die Art und Weise der Berechnung der Boxgröße.

• Box-Sizing: Die Größe der Inhaltsbox ist Breite+Polsterung+Rand (Standard)
• Box-Sizing: Border-Box – die Größe der Box ist die Breite (vorausgesetzt, Polsterung und Rahmen überschreiten die Breite nicht)

* {
    Rand: 0;
    Polsterung: 0;
    Box-Größe: Rahmenbox;
}

a. CSS3-Filter

Die CSS-Eigenschaft „Filter“ wendet grafische Effekte wie Unschärfe oder Farbverschiebung auf ein Element an.

Filter: Funktion();
Zum Beispiel:
filter: blur(5px); /*Unschärfeverarbeitung, je größer die Zahl, desto unschärfer*/

b. CSS3-Calc-Funktion

calc() kann beim Deklarieren von CSS-Eigenschaftswerten einige Berechnungen durchführen

Breite: berechnet (100 % – 80 Pixel);

c. CSS3-Übergänge

Übergangsanimation: Wiederholen Sie einen Zustand und wechseln Sie allmählich in einen anderen Zustand

Übergang: Die Zeit, die für den Übergang der Eigenschaft benötigt wird und wann die Bewegungskurve beginnt;
Wird oft mit /* :hover */ verwendet, zum Beispiel:
Übergang: Breite 0,5 s, Höhe 0,5 s;
/*Mehrere Attribute werden durch Kommas getrennt oder alle*/
/**Wer den Übergang vornimmt, wird hinzugefügt**/

• Attribute : Breite, Höhe, Hintergrund, Farbe, innere und äußere Ränder sind alle OK, Sie können auch alle verwenden
• Dauer : Die Einheit ist Sekunden (die Einheit muss angegeben werden). Beispiel: 0,5 s
• Bewegungskurve: Die Standardeinstellung ist „ease“ (kann weggelassen werden)
• Wann soll gestartet werden: Die Einheit ist Sekunden (die Einheit muss geschrieben werden), Sie können die Verzögerungsauslösezeit einstellen, der Standardwert ist 0 s (kann weggelassen werden).

2D-Transformation

Durch die Transformation können Effekte wie Verschiebung, Drehung und Skalierung von Elementen erzielt werden.

• Verschieben: übersetzen
• Drehen: drehen
• Skalierung: Maßstab

2D-Koordinatensystem

1. Übersetzen

Ändern Sie die Position eines Elements auf der Seite, ähnlich wie bei der Positionierung

//Position der Box verschieben: äußeren Rand der 2D-Transformationsbewegung der Box lokalisieren transform: translate(x, y);
transformieren:übersetzenX();
transformieren:übersetzenY();

• Definiert die Bewegung in 2D-Transformationen, indem Elemente entlang der X- und Y-Achse bewegt werden
• Der größte Vorteil von Translate: Es hat keinen Einfluss auf die Position anderer Elemente
• Die Prozenteinheit bei der Übersetzung ist relativ zum Element selbst : (50 %, 50 %);
• Hat keine Auswirkungen auf Inline-Tags.

2. Drehen: Drehen

Unter 2D-Rotation versteht man die Drehung eines Elements im oder gegen den Uhrzeigersinn in einer zweidimensionalen Ebene.

transform:rotate(degrees) //Einheit: deg

• Positive Winkel sind im Uhrzeigersinn, negative Winkel sind gegen den Uhrzeigersinn
• Der Standardrotationsmittelpunkt ist der Mittelpunkt des Elements.

3. Mittelpunkttransformation - Ursprung

Transform-Ursprung: xy;

• Beachten Sie, dass die folgenden Parameter x und y durch Leerzeichen getrennt sind.
• Der Standardmittelpunkt der xy-Transformation ist (50 % 50 %), was dem Mittelpunkt entspricht.
• Sie können Pixel oder Positionsnomen für xy (oben unten links rechts Mitte) festlegen.

4. Skalieren

transformieren: Skalieren(x, y);

xy wird durch Kommas getrennt transform(i, j): Die Breite wird um das i-fache und die Höhe um das j-fache vergrößert; es wird nur ein Parameter geschrieben, und der zweite Parameter kann die Skalierung des Konvertierungsmittelpunkts wie der erste Parameter festlegen. Die Standardskalierung basiert auf dem Mittelpunkt und wirkt sich nicht auf andere Felder aus

5. Umfassendes Schreiben der 2D-Konvertierung

a. Verwenden Sie mehrere Transformationen gleichzeitig, Format: transform: translate() rotate() scale() usw.;

b. Die Reihenfolge beeinflusst den Effekt der Konvertierung (durch Drehen ändert sich zuerst die Richtung der Koordinatenachsen).

c. Wenn gleichzeitig eine Verschiebung und andere Attribute vorhanden sind, setzen Sie die Verschiebung an die erste Stelle

CSS3-Animation

Animation kann eine oder mehrere Animationen präzise steuern, indem mehrere Knoten gesetzt werden. Dies wird häufig verwendet, um komplexe Animationseffekte zu erzielen, mit denen mehr Änderungen, mehr Kontrolle, kontinuierliche automatische Wiedergabe und andere Effekte erreicht werden können.

1. Grundlegende Verwendung von Animationen

• Definieren Sie zuerst die Animation
• Animation erneut aufrufen

a. Animation mit Keyframes definieren (ähnlich wie beim Definieren von Selektoren)

Sie können einem Element mehrere Animationen hinzufügen, indem Sie sie durch Kommas trennen.

@keyframes Animationsname {
    0% {
        Breite: 100px;
    }
    100 % {
        Breite: 200px;
    }
}

• 0% ist der Beginn der Animation, 100% ist das Ende der Animation
• Sie können beliebig viele Stile beliebig oft ändern
• von und bis, entspricht 0 % und 100 %
• Der Prozentsatz muss eine Ganzzahl sein
• Sie können mehrere Statusänderungen Keyframe Keyframe machen

b. Elemente mit Animation

div {
    Animation: Name;
    Animationsdauer: Dauer:
}

2. Allgemeine Eigenschaften der Animation

3. Eigenschaften der Animationskurzschrift

Animation: Animationsname, Dauer, Bewegungskurve, Startzeitpunkt, Anzahl der Wiedergaben, ob die Animation in die entgegengesetzte Richtung verläuft, Start- oder Endstatus

Animation: erste 5 s linear 2 s unendlich abwechselnd

• Die Abkürzungeigenschaft enthält keinen Animation-Play-State
• Animation pausieren: animation-play-state: paused; wird oft mit anderen Funktionen wie Mouseover verwendet
• Möchten Sie, dass die Animation zurückgeht, anstatt zurückzuspringen: Animationsrichtung: Alternative;
• Nachdem die Boxanimation beendet ist, wird sie an der Endposition angehalten: animation-fill-mode: forwards;

Details zur Geschwindigkeitskurve

Animations-Timing-Funktion: Gibt die Geschwindigkeitskurve der Animation an, der Standardwert ist „ease“

3D-Konvertierung

• 3D-Verschiebung und 3D-Rotation
• 3D-Verschiebung: translate3d(x,y,z)
• 3D-Rotation: rotate3d(x,y,z)
• Perspektive: Perspektive
• 3D-Rendering: Transform-Stil

1. Verschiebung translate3d

• transform: translateZ(100px); Bewegung entlang der Z-Achse, normalerweise in px
• translateZ(100px) positiv bedeutet nach außen bewegen, negativ bedeutet nach innen bewegen
• translate3d(x,y,z) , kann nicht weggelassen werden, schreibe 0, wenn nicht angegeben

2. Perspektive (px)

Die Perspektive wird auf das übergeordnete Kästchen des beobachteten Elements geschrieben (größer, wenn es nah ist, und kleiner, wenn es weit weg ist).

d: Dies ist der Betrachtungsabstand, also der Abstand vom menschlichen Auge zum Bildschirm.

z: Dies ist die Z-Achse, der Abstand des Objekts vom Bildschirm. Je größer die Z-Achse (positiver Wert), desto größer ist das Objekt, das wir sehen.

3. Drehen rotate3d

rotate3d ermöglicht die Drehung des Elements entlang der x-Achse, y-Achse, z-Achse oder einer benutzerdefinierten Achse in einer dreidimensionalen Ebene

Elementdrehrichtung: Linkshandregel

X

• Der Daumen der linken Hand zeigt in die positive Richtung der x-Achse
• Die Biegerichtung der verbleibenden Finger ist die Richtung, in der sich das Element entlang der x-Achse dreht.

j

• Der Daumen der linken Hand zeigt in die positive Richtung der y-Achse
• Die Biegerichtung der verbleibenden Finger ist die Richtung, in die sich das Element entlang der y-Achse dreht (positiver Wert).

transform:rotate3d(x,y,z,deg): Dreht entlang der definierten Achse um einen Winkel von Grad.

xyz stellt den Vektor der Rotationsachse dar, und der letzte gibt den Rotationswinkel an

4. 3D-Rendering im Transform-Stil (wichtig)

• Steuert, ob das untergeordnete Element die 3D-Umgebung öffnet
• Transform-Style: Flaches Unterelement öffnet standardmäßig keinen 3D-Stereoraum
• transform-style: preserve-3d; Das untergeordnete Element öffnet den 3D-stereoskopischen Raum
• Der Code wird in das übergeordnete Element geschrieben, wirkt sich aber auf die untergeordneten Felder aus

Damit ist dieser Artikel über Beispielcodes für CSS3-Übergänge, Rotation, Perspektive, 2D- und 3D-Animationen und andere Effekte abgeschlossen. Weitere relevante Inhalte zu CSS3-Rotation, Perspektive, 2D- und 3D-Animationen 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!