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 Erläuterung der Cache-Konfiguration von Nginx Proxy_Cache
Vorwort: Aufgrund meiner Arbeit beschäftige ich m...
Detaillierte Erklärung, wie MySQL (InnoDB) mit Deadlocks umgeht
1. Was ist ein Deadlock? Die offizielle Definitio...
jQuery implementiert alle Warenkorbfunktionen
Inhaltsverzeichnis 1. Alles auswählen 2. Erhöhen ...
Beispielcode zur Implementierung des Vollbild-Scrolleffekts von fullpage.js mit CSS
Als ich kürzlich CSS studierte, stellte ich fest,...
Zusammenfassung der MySQL-Ansichtsprinzipien und Anwendungsbeispiele
Dieser Artikel fasst die Prinzipien und die Verwe...
Der Prozess zum Erstellen eines Jenkins-Projekts unter Linux (am Beispiel von CentOS 7)
Nehmen Sie als Beispiel die Bereitstellung von ht...
Perfekte Lösung für das Problem, dass Navicat nach der Installation von MySQL im Docker keine Verbindung herstellen kann
1. Docker zieht das Image Docker Pull MySQL (stan...
MySQL-Abfrage redundanter Indizes und ungenutzter Indexoperationen
MySQL 5.7 und höhere Versionen ermöglichen die di...
JavaScript zum Implementieren des Click-to-Switch-Bestätigungscodes und der Bestätigung
In diesem Artikel wird der spezifische JavaScript...
Detaillierte Erläuterung der drei Möglichkeiten zum Importieren von CSS-Dateien
Es gibt drei Möglichkeiten, CSS einzuführen: Inli...
Details zur Ereignisbindung reagieren
Inhaltsverzeichnis Ereignisbindung von Klassenkom...
Nach dem Klickereignis des HTML-Hyperlinks a wird zur Adresse gesprungen, auf die href zeigt.
Manchmal müssen wir den Hyperlink <a> anstel...
Eine kurze Erläuterung der Lösung für den Fehler beim Starten der Serverinstallation in MySQL
Wenn Sie MySQL zum ersten Mal auf Ihrem Computer ...
Eine kurze Erläuterung der Unterschiede zwischen FTP, FTPS und SFTP
Inhaltsverzeichnis Einführung in FTP, FTPS und SF...
So rufen Sie das VMware Esxi-Root-Passwort erfolgreich ab, wenn Sie es vergessen haben
Bereiten Sie eine CentOS6-Installationsdiskette (...