Ein Beispiel für die Implementierung einer einfachen Fingerklick-Animation mit CSS3 Animation
|
Dieser Artikel stellt hauptsächlich ein Beispiel für die Implementierung einer einfachen Fingerklick-Animation in CSS3 Animation vor und teilt es mit Ihnen. Die Details sind wie folgt: Rendern
<!DOCTYPE html>
<html>
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0, Maximalmaßstab=1.0, Benutzerskalierung=0" />
<title>CSS3 – Einfache Fingerklick-Animation durch Animation</title>
<Stil>
.wrapper{position:relative;überlauf:versteckt;breite:500px;höhe:500px;rand:0 auto;hintergrundfarbe:schwarz}
.circle{position:absolute;links:50%;oben:50%;margin:-70px 0 0 -46px;
Hintergrund: URL("./circle.png") Mitte Mitte, keine Wiederholung;
Breite: 62px; Höhe: 62px; Animation: Kreis. 1 Sekunde ausblenden. Unendlich. Beides}
.finger{background:url("./finger.png") Mitte Mitte keine Wiederholung;Breite:100px;Höhe:140px;Rand:170px automatisch;Animation:fingerHandle 1s Leichtigkeit unendlich beide}
@keyframes fingerHandle{
0 % {transform: keine}
70 % {transform:scale3d(.8,.8,.8)}
100 % {transform:none}
}
@keyframes circleHide{
0 % {Deckkraft: 0; Transformieren: Maßstab 3d (0,0,0)}
70 % {Deckkraft: 1; Transformieren: Skalierung 3d (1,2,1,2,1,2)}
100 % {Deckkraft: 0; Transformation: Maßstab 3d (0,0,0)}
}
</Stil>
</Kopf>
<Text>
<div Klasse="Wrapper">
<div Klasse="Kreis"></div>
<div Klasse="Finger"></div>
</div>
</body>
</html>Damit ist dieser Artikel über Beispiele zur Implementierung einfacher Fingerklick-Animationen mit Animation in CSS3 abgeschlossen. Weitere relevante CSS3-Fingerklick-Animationsinhalte finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: So beschränken Sie das Eingabefeld in HTML auf die Eingabe reiner Zahlen
>>: HTML + CSS zum Erzielen des Spezialeffektcodes für die Aufladung der Wassertropfenfusion
Artikel empfehlen
Implementierung einer geplanten Sicherung in Mysql5.7
1. Suchen Sie mysqldump.exe im MySQL-Installation...
Eine Frage zur Einstellung des Randradius-Werts
Problemdatensatz Heute wollte ich ein kleines Bau...
Beispielcode zur Realisierung des Ladeeffekts der B-Station mit CSS+SVG
Schwierigkeit Erstellung von zwei Masken für SVG-...
Detaillierte Erläuterung der default_server-Definition und der entsprechenden Regeln von nginx
Die default_server-Direktive von nginx kann einen...
Vue implementiert Beispielcode für Links- und Rechtsgleiteffekte
Vorwort Die bei der persönlichen tatsächlichen En...
Docker-Installations-Tutorial zu RocketMQ (am ausführlichsten)
RocketMQ ist eine verteilte, warteschlangenbasier...
XHTML 1.0-Referenz
Nach Funktion sortierenNN: Gibt an, welche frühere...
Erläuterung der Linux-Kernel-Optimierungskonfiguration für hochparallele Nginx-Server
Da die Standardparameter des Linux-Kernels auf de...
mysql installer community 8.0.12.0 grafische anleitung zur installation
Dieses Tutorial beschreibt die Installation der M...
So verwenden Sie crontab, um MySQL-Datenbanken regelmäßig im Linux-System zu sichern
Verwenden Sie die System-Crontab, um regelmäßig S...
Einführung in general_log-Protokollwissenspunkte in MySQL
Die folgenden Funktionsdemonstrationen basieren a...
Detaillierte Erklärung der Lösung für den Absturz von Tomcat beim Doppelklicken auf startup.bat
Als Programmierer, der gerade Tomcat gelernt hat,...
Tutorial zum Ändern der IP-Adresse einer virtuellen Linux-Maschine, Überprüfen des Gateways und Konfigurieren der Netzwerkumgebung
Ändern Sie die IP-Adresse der virtuellen Maschine...
Projektpraxis zum Bereitstellen von Docker-Containern mit Portainer
Inhaltsverzeichnis 1. Hintergrund 2. Bedienungssc...
Beispiel für die Konfiguration von Nginx im CentOS-Server
Laden Sie das sichere Terminal MobaXterm_Personal...