Hiermit werden die Grundkenntnisse des Interviewten in CSS getestet. Es gibt drei Hauptmöglichkeiten, Animationen in CSS zu implementieren Der erste ist: Übergang zur Erzielung einer Verlaufsanimation Die zweite ist: Transformieren Sie die Übergangsanimation Drittens: Animation zur Implementierung benutzerdefinierter Animationen Nachfolgend finden Sie eine detaillierte Beschreibung der Implementierungsmethoden der drei Animationstypen. Übergangsverlaufsanimation Schauen wir uns zunächst die Eigenschaften des Übergangs an:
Der spezifische Wert der Timing-Funktion ist in der folgenden Tabelle aufgeführt:
Schauen wir uns ein vollständiges Beispiel an: <div Klasse="Basis"></div> .Basis { Breite: 100px; Höhe: 100px; Anzeige: Inline-Block; Hintergrundfarbe: #0EA9FF; Rahmenbreite: 5px; Rahmenstil: durchgezogen; Rahmenfarbe: #5daf34; Übergangseigenschaft: Breite, Höhe, Hintergrundfarbe, Rahmenbreite; Übergangsdauer: 2s; Übergangs-Timing-Funktion: Ease-In; Übergangsverzögerung: 500 ms; /*Abkürzung*/ /*Übergang: alle 2 s, 500 ms einlaufen lassen;*/ &:schweben { Breite: 200px; Höhe: 200px; Hintergrundfarbe: #5daf34; Rahmenbreite: 10px; Rahmenfarbe: #3a8ee6; } } Wirkung der Operation: Sie können sehen, dass die Animation mit einer Verzögerung von 0,5 Sekunden startet, wenn die Maus nach oben bewegt wird. Da in der Übergangseigenschaft keine Rahmenfarbe festgelegt ist, gibt es keine Verlaufsanimation. Animation transformieren Die Transform-Eigenschaft wendet eine 2D- oder 3D-Transformation an. Mit diesem Attribut können wir Elemente drehen, skalieren, neigen und verschieben. Es wird normalerweise in Verbindung mit dem Übergangsattribut verwendet.
2.1 Drehen: hauptsächlich unterteilt in 2D-Drehung und 3D-Drehung. drehen(Winkel), 2D-Rotation, der Parameter ist der Winkel, z. B. 45 Grad; drehen(x,y,z,Winkel), 3D-Rotation, 3D-Rotation um die Linie von der ursprünglichen Position zu (x,y,z); drehenX(Winkel), 3D-Rotation entlang der X-Achse; drehenY(Winkel); drehenZ(Winkel); 2.2 Maßstab: Wird im Allgemeinen verwendet, um die Größe eines Elements festzulegen. Die Haupttypen sind dieselben wie oben, einschließlich scale(x, y), scale3d(x, y, z), scaleX(x), scaleY(y) und scaleZ(z), wobei x, y und z die Schrumpfungsverhältnisse sind. 2.3 Schrägstellen: Wird hauptsächlich verwendet, um den Stil eines Elements zu neigen. skew(x-Winkel, y-Winkel), 2D-Schieftransformation entlang der x- und y-Achse; skewX(Winkel), 2D-Schieftransformation entlang der x-Achse; skew(Winkel), 2D-Schieftransformation entlang der y-Achse. 2.4 Übersetzen: Wird hauptsächlich zum Verschieben von Elementen verwendet. translate(x, y) definiert die Pixelpunkte, die entlang der x- und y-Achse verschoben werden; translate(x, y, z) definiert die Pixelpunkte, die entlang der x-, y- und z-Achse verschoben werden; translateX(x); translateY(y); translateZ(z). <h5>Transition wird zusammen mit Transform verwendet</h5> <div Klasse="Basis Basis2"></div> .base2{ transformieren: keine; Übergangseigenschaft: transformieren; &:schweben { Transformieren: Skalieren (0,8, 1,5), Drehen (35 Grad), Schrägstellen (5 Grad), Verschieben (15 Pixel, 25 Pixel); } } Wirkung der Operation: Sie können sehen, dass die Box gedreht, gekippt, verschoben und vergrößert wird. Animation, benutzerdefinierte Animation Um flexiblere Animationseffekte zu erzielen, bietet CSS3 auch benutzerdefinierte Animationsfunktionen. (1) Name: Der Keyframe-Name, der an den Selektor gebunden werden muss. (2) Dauer: Die zum Abschließen der Animation benötigte Zeit in Sekunden oder Millisekunden. (3) Timing-Funktion: wie bei Transition-Linear. (4) delay: Legt die Verzögerung fest, bevor die Animation startet. (5) Iterationsanzahl: Legt fest, wie oft die Animation ausgeführt wird. Unendlich bedeutet eine Endlosschleife. (6) Richtung: Gibt an, ob die Animation rückwärts abgefragt werden soll. normal, der Standardwert, die Animation sollte normal abgespielt werden; alternativ, die Animation sollte in umgekehrter Reihenfolge abgespielt werden. <h5 class="title">Benutzerdefinierte Animation animieren</h5> <div Klasse="Basis Basis3"></div> .base3 { Randradius: 50 %; transformieren: keine; Position: relativ; Breite: 100px; Höhe: 100px; Hintergrund: linearer Farbverlauf( 35 Grad, #ccffff, #ffcccc ); &:schweben { Animationsname: Bounce; Animationsdauer: 3s; Anzahl der Animationsiterationen: unendlich; } } @Keyframes springen { 0% { oben: 0px; } 50 % { oben: 249px; Breite: 130px; Höhe: 70px; } 100 % { oben: 0px; } } Wirkung der Operation: Wie Sie sehen, können mit benutzerdefinierten Animationen flexiblere Animationseffekte erzielt werden, die alle Funktionen der ersten und zweiten Animation umfassen und deren Eigenschaften umfassender sind. Online-Produktion Den obigen Code können Sie online erfahren: Adresse Quellcodeadresse Oben sind die Details der drei Möglichkeiten zur Implementierung von Animationen mit CSS3 aufgeführt. Weitere Informationen zur Implementierung von Animationen mit CSS3 finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! |
<<: Fünf Dinge, die ein guter User Experience Designer gut machen sollte (Bild und Text)
>>: Spezifischer Einsatz von Routing Guards in Vue
In diesem Artikelbeispiel wird der spezifische Ja...
Ich nenne diese Art von Fehler einen typischen „H...
Vorwort Manchmal benötigen wir eine Floating-Effe...
Vorwort Für das Projekt ist ein kreisförmiges Men...
Inhaltsverzeichnis Vorwort Mischen Mixin-Hinweis ...
HTML-Kommentarfeld mit Emoticons. Die Emoticons w...
Inhaltsverzeichnis 1. So erstellen Sie ein Array ...
Bei der Designarbeit höre ich oft, dass an der Übe...
Die Installation der mysql5.7.18zip-Version unter...
Fragen Sie zuerst die MySQL-Quelle ab Docker-Such...
MySQL zeichnet zeitaufwändiges SQL auf MySQL kann...
Innerhalb des Style-Tags der Vue-Komponente befin...
Das Festlegen der Schriftart für die gesamte Site...
1. Was ist CSS Animations ist ein vorgeschlagenes...
In diesem Artikel wird beschrieben, wie Sie mit D...