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
Mit dem Befehl docker prune können Sie selten genutzte Daten regelmäßig bereinigen.
Inhaltsverzeichnis Docker-System df Docker-System...
Mysql SQL-Anweisungskommentare
Sie können MySQL-SQL-Anweisungen Kommentare hinzu...
So binden Sie einen Docker-Container an eine externe IP und einen externen Port
Docker ermöglicht die Bereitstellung von Netzwerk...
Die Rolle von nextTick in Vue und mehrere einfache Anwendungsszenarien
Zweck Verstehen Sie die Rolle von nextTick und me...
Verstehen Sie einfach die Unterschiede in den Prinzipien gängiger SQL-Delete-Anweisungen
In diesem Artikel werden hauptsächlich die Unters...
Detaillierte Erklärung des Sandbox-Mechanismus von Vue3
Inhaltsverzeichnis Vorwort Browser kompilierte Ve...
vitrualBox+ubuntu16.04 installieren Sie Python3.6, neuestes Tutorial und detaillierte Schritte
Da ich derzeit zum Erlernen von Deep Learning die...
So exportieren Sie eine CSV-Datei mit Header in MySQL
Siehe das offizielle Dokument http://dev.mysql.co...
Aktivierungsmethode für Windows Service 2016 Datacenter\Stand\Embedded (2021)
Führen Sie cmd mit Administratorrechten aus slmgr...
Vue implementiert eine Komponente zur dynamischen Abfrageregelgenerierung
1. Dynamische Abfrageregeln Die dynamischen Abfra...
Einführung in die MySQL-Entsperr- und Sperrtabelle
MySQL Lock-Übersicht Im Vergleich zu anderen Date...
Detailliertes Tutorial zur Installation von ElasticSearch 6.4.1 auf CentOS7
1. Laden Sie das ElasticSearch 6.4.1-Installation...
3 Codes zur automatischen Aktualisierung von Webseiten
Tatsächlich ist es sehr einfach, diesen Effekt zu ...
Lösungen für den Fehler und die Ungültigkeit beim Öffnen von nginx.pid
Inhaltsverzeichnis 1. Problembeschreibung 2. Prob...
Parsen des Linux-Quellcodes epoll
Inhaltsverzeichnis 1. Einleitung 2. Einfaches Epo...