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
![MySQL Dual-Machine Hot-Standby-Implementierungslösung [testbar]](/upload/images/67cada719e1e2.webp)
Artikel empfehlen
CSS Acht auffällige HOVER-Effekt-Beispielcodes
1. Effekt-HTML senden <div id="senden-btn...
Detaillierte Einführung in das CSS-Prioritätswissen
Bevor wir über die CSS-Priorität sprechen, müssen...
Konfigurationsmethode für die SystemC-Umgebung unter Linux
Das Folgende ist die Konfigurationsmethode unter ...
Grafisches Tutorial zur Installation von MySQL5.7.18 im Windows-System
MySQL-Installationstutorial für Windows-Systeme h...
Detaillierter Prozess zum Ändern des Hostnamens, nachdem Docker einen Container erstellt hat
Es gibt ein Heilmittel gegen Reue auf der Welt, s...
So verwalten Sie MySQL-Indizes und Datentabellen
Inhaltsverzeichnis Tabellenkonflikte finden und b...
Implementierungsprinzip und Konfiguration der MySql Master-Slave-Replikation
Die Trennung von Lese- und Schreibzugriffen in Da...
VUE implementiert Token-Anmeldeüberprüfung
In diesem Artikelbeispiel wird der spezifische Co...
Docker nginx Beispielmethode zum Bereitstellen mehrerer Projekte
Voraussetzungen 1. Docker wurde auf dem lokalen C...
Lösung zur Datenduplizierung bei Verwendung von Limit+Order By in der MySql-Paging
Inhaltsverzeichnis Zusammenfassung Problembeschre...
CocosCreator Skelettanimation Drachenknochen
CocosCreator Version 2.3.4 Drachenknochenanimatio...
JS+CSS zur Realisierung einer dynamischen Uhr
In diesem Artikelbeispiel wird der spezifische Co...
IIS7 IIS8 http springt automatisch zu HTTPS (Port 80 springt zu Port 443)
IIS7 muss bestätigen, ob das pseudostatische Modu...
So deinstallieren Sie das native OpenJDK von Linux und installieren Sun JDK
Siehe: https://www.jb51.net/article/112612.htm Üb...
Vue+Element - benutzerdefinierte Abfragekomponente
In diesem Artikel wird hauptsächlich das Vue-Proj...