CSS zum Erzielen eines schnellen und coolen Schüttelanimationseffekts
1. Einführung in Animate.cssAnimate.css ist eine gebrauchsfertige, browserübergreifende Animationsbibliothek zur Verwendung in Ihren Webprojekten. Perfekt für Hervorhebungen, Titelseiten, Schieberegler und aufmerksamkeitslenkende Eingabeaufforderungen. Es handelt sich um eine CSS3-Animationsbibliothek aus dem Ausland. Sie bietet über 60 voreingestellte Animationseffekte wie Schütteln, Blinken, Hüpfen, Umdrehen, Ein-/Ausblenden, Ein-/Ausblenden usw. und deckt damit fast alle gängigen Animationseffekte ab. Obwohl man mit Animate.css einfach und schnell CSS3-Animationseffekte erstellen kann, ist es dennoch empfehlenswert, einen Blick auf den Animate.css -Code zu werfen. Vielleicht kann man daraus etwas lernen. Es kann normalerweise sowohl im Web als auch im Miniprogramm verwendet werden. Weitere Einzelheiten erfahren Sie unter der offiziellen Adresse. 2. Implementierung von AnimationseffektenWährend der Verwendung können Sie den CSS-Code nach Ihren Wünschen ändern, um den gewünschten Effekt zu erzielen. Die animierten Grafiken im Artikel sind möglicherweise nicht besonders intuitiv. Es wird empfohlen, dass Sie den Code selbst schreiben, was dem Lernen förderlich ist und den Animationseffekt intuitiv erleben kann. 1. Leuchtende Box
WXML-Code: <view id="box">Ich bin LetCode!</view> wxss-Code:
@keyframes animierter Rand {
0 % { Boxschatten: 0 0 0 0 rgba(255,255,255,0,4);
100 % { Boxschatten: 0 0 0 20px rgba(255,255,255,0); }
}
#Kasten {
Animation: animierter Rand, 1,5 s, unendlich;
Höhe: 100rpx;
Schriftfamilie: Arial;
Schriftgröße: 18px;
Schriftstärke: fett;
Farbe: weiß;
Rand: 2px durchgezogen;
Rahmenradius: 10px;
Rand: 100px 15px;
Zeilenhöhe: 100rpx;
Textausrichtung: zentriert;
}2. Textskalierungseffekt
WXML-Code: <view class="animate_zoomOutDown">Folgen Sie dem öffentlichen Konto „Java Technology Fans“, um mehr zu teilen! </Ansicht> wxss-Code:
@keyframes zoomOutDown
{
40 %
{
Deckkraft: 1;
transformieren: scale3d(0,475, 0,475, 0,475) übersetzen3d(0, -60px, 0);
Animations-Timing-Funktion: kubische Bézier-Funktion (0,55, 0,055, 0,675, 0,19);
}
Zu
{
Deckkraft: 0;
transformieren: scale3d(0,1, 0,1, 0,1) übersetzen3d(0, 2000px, 0);
Animations-Timing-Funktion: kubische Bézier-Funktion (0,175, 0,885, 0,32, 1);
}
}
.animate_zoomOutDown
{
Animation: 2 s linear 0 s unendlich abwechselnd ZoomOutDown;
Schriftfamilie: Arial;
Schriftgröße: 18px;
Schriftstärke: fett;
Farbe: weiß;
Rand oben: 70px;
Textausrichtung: zentriert;
Rand oben: 15px;
}3. Animation laden
WXML-Code: <Ansichtsklasse="load-container load"> <Klasse anzeigen="loader"> </Ansicht> </Ansicht> <view class="txt">Folgen Sie dem öffentlichen Konto „Java Technology Fans“, um mehr zu erfahren! </Ansicht> wxss-Code:
.Container laden
{
Breite: 240px;
Höhe: 240px; Rand: 0 automatisch;
Position: relativ;
Überlauf: versteckt;
Box-Größe: Rahmenbox;
}
.laden .loader
{
Farbe: #ffffff; Schriftgröße: 90px; Texteinzug: -9999em; Überlauf: ausgeblendet;
Breite: 1em; Höhe: 1em; Rahmenradius: 50 %;
Rand: 72px automatisch;
Position: relativ; Transformation: translateZ(0);
Animation: Laden 1,7 s unendlich einfach, Runde 1,7 s unendlich einfach;
} @keyframes laden
{
0 %
{ box-shadow: 0 -0,83em 0 -0,4em, 0 -0,83em 0 -0,42em, 0 -0,83em 0 -0,44em, 0 -0,83em 0 -0,46em, 0 -0,83em 0 -0,477em;
}
5 %, 95 %
{ box-shadow: 0 -0,83em 0 -0,4em, 0 -0,83em 0 -0,42em, 0 -0,83em 0 -0,44em, 0 -0,83em 0 -0,46em, 0 -0,83em 0 -0,477em;
}
10 %, 59 %
{
Kastenschatten: 0 -0,83em 0 -0,4em, -0,087em -0,825em 0 -0,42em, -0,173em -0,812em 0 -0,44em, -0,256em -0,789em 0 -0,46em, -0,297em -0,775em 0 -0,477em;
}
20 % { Box-Shadow: 0 -0,83em 0 -0,4em, -0,338em -0,758em 0 -0,42em, -0,555em -0,617em 0 -0,44em, -0,671em -0,488em 0 -0,46em, -0,749em -0,34em 0 -0,477em;
}
38 % { Box-Shadow: 0 -0,83em 0 -0,4em, -0,377em -0,74em 0 -0,42em, -0,645em -0,522em 0 -0,44em, -0,775em -0,297em 0 -0,46em, -0,82em -0,09em 0 -0,477em;
}
100 % { Box-Shadow: 0 -0,83em 0 -0,4em, 0 -0,83em 0 -0,42em, 0 -0,83em 0 -0,44em, 0 -0,83em 0 -0,46em, 0 -0,83em 0 -0,477em;
}
}
@Keyframes rund
{
0 %
{
transformieren: drehen (0 Grad);
}
100 %
{
transformieren: drehen (360 Grad);
}
}4. Text schütteln
WXML-Code: <view class="shake-slow txt">Folgen Sie dem öffentlichen Konto „Java Technology Fans“, um mehr zu teilen! </Ansicht> wxss-Code:
@keyframes schütteln-langsam
{
2 %
{
transformieren: verschieben(6px, -2px) drehen(3,5 Grad);
}
4 %
{
transformieren: verschieben(5px, 8px) drehen(-0,5 Grad);
}
6 %
{ transformieren: übersetzen(6px, -3px) drehen(-2,5 Grad);
}
8 %
{ transformieren: verschieben(4px, -2px) drehen(1,5 Grad);
}
10 %
{
transformieren: verschieben(-6px, 8px) drehen(-1,5 Grad);
}
12 %
{
transformieren: verschieben(-5px, 5px) drehen(1,5 Grad);
}
14 % { transformieren: übersetzen (4px, 10px) drehen (3,5 Grad);
} 16 % { transformieren: übersetzen (0px, 4px) drehen (1,5 Grad);
} 18 % { transformieren: verschieben (-1px, -6px) drehen (-0,5 Grad);
} 20 % { transformieren: verschieben (6px, -9px) drehen (2,5 Grad);
}
22 % { transformieren: übersetzen (1px, -5px) drehen (-1,5 Grad);
} 24 % { transformieren: verschieben (-9px, 6px) drehen (-0,5 Grad);
} 26 % { transformieren: übersetzen (8px, -2px) drehen (-1,5 Grad);
}
28 % { transformieren: verschieben(2px, -3px) drehen(-2,5 Grad); }
30 %
{ transformieren: übersetzen(9px, -7px) drehen(-0,5 Grad); }
32 %
{ transformieren: übersetzen(8px, -6px) drehen(-2,5 Grad); }
34 %
{ transformieren: verschieben(-5px, 1px) drehen(3,5 Grad); }
36 %
{ transformieren: verschieben(0px, -5px) drehen(2,5 Grad); }
38 %
{ transformieren: übersetzen(2px, 7px) drehen(-1,5 Grad); }
40 %
{ transformieren: übersetzen(6px, 3px) drehen(-1,5 Grad); }
42 %
{ transformieren: verschieben(1px, -5px) drehen(-1,5 Grad); }
44 %
{ transformieren: übersetzen(10px, -4px) drehen(-0,5 Grad); }
46 % { transformieren: übersetzen(-2px, 2px) drehen(3,5 Grad); }
48 % { transformieren: übersetzen (3px, 4px) drehen (-0,5 Grad); }
50 % { transformieren: übersetzen (8px, 1px) drehen (-1,5 Grad); }
52 % { transformieren: übersetzen (7px, 4px) drehen (-1,5 Grad); }
54 % { transformieren: übersetzen (10px, 8px) drehen (-1,5 Grad); }
56 % { transformieren: verschieben(-3px, 0px) drehen(-0,5 Grad); }
58 % { transformieren: übersetzen (0px, -1px) drehen (1,5 Grad); }
60 % { transformieren: übersetzen (6px, 9px) drehen (-1,5 Grad); }
62 % { transformieren: übersetzen (-9px, 8px) drehen (0,5 Grad); }
64 % { transformieren: übersetzen (-6px, 10px) drehen (0,5 Grad); }
66 % { transformieren: übersetzen (7px, 0px) drehen (0,5 Grad); }
68 % { transformieren: übersetzen (3px, 8px) drehen (-0,5 Grad); }
70 % { transformieren: verschieben(-2px, -9px) drehen(1,5 Grad); }
72 % { transformieren: übersetzen (-6px, 2px) drehen (1,5 Grad); }
74 % { transformieren: verschieben(-2px, 10px) drehen(-1,5 Grad); }
76 % { transformieren: übersetzen (2px, 8px) drehen (2,5 Grad); }
78 % { transformieren: übersetzen (6px, -2px) drehen (-0,5 Grad); }
80 % { transformieren: übersetzen (6px, 8px) drehen (0,5 Grad); }
82 % { transformieren: übersetzen (10px, 9px) drehen (3,5 Grad); }
84 % { transformieren: verschieben(-3px, -1px) drehen(3,5 Grad); }
86 % { transformieren: übersetzen (1px, 8px) drehen (-2,5 Grad); }
88 % { transformieren: verschieben(-5px, -9px) drehen(2,5 Grad); }
90 % { transformieren: übersetzen (2px, 8px) drehen (0,5 Grad); }
92 % { transformieren: übersetzen (0px, -1px) drehen (1,5 Grad); }
94 % { transformieren: übersetzen(-8px, -1px) drehen(0,5 Grad); }
96 % { transformieren: verschieben(-3px, 8px) drehen(-1,5 Grad); }
98 %
{
transformieren: verschieben(4px, 8px) drehen(0,5 Grad);
}
0 %, 100 %
{
transformieren: verschieben(0, 0) drehen(0);
}
}
.schütteln-langsam
{
Animation: langsames Schütteln, 5 s, unendliches Ein- und Ausfahren;
}Im eigentlichen Entwicklungsprozess gibt es weit mehr als diese coolen Animationseffekte. Mit der rasanten Entwicklung des Internets werden mehr Programmierer benötigt, um funktionale Anforderungen zu realisieren. Daher gibt dieser Artikel nur eine kurze Einführung. Fortsetzung folgt … Dies ist das Ende dieses Artikels darüber, wie man mit CSS schnelle und coole Schüttelanimationseffekte erzielt. Weitere relevante Inhalte zu CSS-Schütteleffekten finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Verschieben Sie die MySQL-Datenbank unter Windows auf eine andere Festplatte
>>: Zusammenfassung der Unterschiede zwischen den Methoden find() und filter() in JavaScript
Artikel empfehlen
Detaillierte Erklärung und Zusammenfassung der URL zur Datenbankverbindung
Detaillierte Erklärung und Zusammenfassung der UR...
Persönlicher Test des Installationstutorials zur Dekomprimierungsversion von MySQL 8.0.12!
Die Installationsmethode für die dekomprimierte V...
CSS-Schreibformat, detaillierte Erklärung der Grundstruktur einer mobilen Seite
1. CSS-Schreibformat 1. Inline-Stile Sie können C...
Detaillierte Erläuterung der Deep Copy und Shallow Copy im JS-Variablenspeicher
Inhaltsverzeichnis Variabler Typ und Speicherplat...
Vue erzielt den Top-Effekt durch V-Show
html <div Klasse="nach oben" v-show=...
Grafisches Tutorial zur Installation und Konfiguration der MySQL 5.7.21-Dekomprimierungsversion
Da ich das System häufig installiere, muss ich na...
So implementieren Sie den Dienststatus zur Nginx-Konfigurationserkennung
1. Überprüfen Sie, ob das Modul „Status prüfen“ i...
MySQL 1130-Ausnahme, Remote-Anmeldung nicht möglich – Lösung
Inhaltsverzeichnis Frage: 1. Aktivieren Sie die B...
Deinstallation und Installation von MySQL5.7-Betriebsprozess und Methode zur Änderung des Kodierungsformats von CentOS7.x
1. Deinstallation von MySQL 5.7 1.1查看yum是否安裝過mysq...
Diagramm des installationsfreien Konfigurationsprozesses für komprimierte MySQL 5.7.17-Pakete
Es gibt zwei Versionen der MySQL-Datenbankverwalt...
Detaillierte Erklärung der Destrukturierungszuweisung in JavaScript
Inhaltsverzeichnis Konzept Array-Destrukturierung...
MySQL MSI Installations-Tutorial unter Windows 10 mit Bildern und Text
1. Herunterladen 1. Klicken Sie auf den neuesten ...
Nginx übernimmt die Analyse des Implementierungsprozesses für HTTP-Anforderungen
Nginx entscheidet zunächst, welcher Serverblock i...
Analyse der Fallstricke beim Rundungsvorgang der ROUND-Funktion in MySQL
Dieser Artikel veranschaulicht anhand von Beispie...
Docker stellt über einen Port eine Verbindung zu einem Container her
Docker-Container-Verbindung 1. Netzwerk-Port-Mapp...