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

Native JavaScript-Implementierung des Fortschrittsbalkens

Detailliertes Tutorial zum Einrichten mehrerer Instanzen von MySQL 8 auf CentOS 7 (Sie können so viele haben, wie Sie möchten)

Ursache Ich habe vor Kurzem mit der Umstrukturier...

Ein Beispiel für die Implementierung einer einfachen Fingerklick-Animation mit CSS3 Animation

Native JavaScript-Implementierung des Fortschrittsbalkens

Analyse der Verwendung von Schleifenanweisungen (WHILE, REPEAT und LOOP) in gespeicherten MySQL-Prozeduren

Beispiel für die Verwendung des Nginx-Reverse-Proxys für Go-FastDFS

Verwenden Sie Python, um mithilfe des Moduls pymysql eine Verbindung zur MySQL-Datenbank herzustellen

Einführung in die Apache-Bereitstellung von https in der Kryptografie

Detaillierte Erläuterung der Konfiguration und Einführung des MySQL-Halbsynchron-Replikationsprinzips

Ausführliches Tutorial zur Installation von WinX64 unter MySQL8.0.18 (mit Bildern und Text)

Beispiel für die Implementierung des Ziehens von Zeilen und Spalten in einer Elementtabelle

Holen Sie sich die IP und den Hostnamen aller Hosts auf Zabbix

Tutorial zur Installation von MYSQL8.0 auf Alibaba Cloud ESC

Artikel empfehlen

Einführung in die CentOS7-Firewall und portbezogene Befehle

Verwendung von benutzerdefinierten Nginx-Variablen und integrierten vordefinierten Variablen

Umfassende Website-Bewertungslösung

Vue implementiert das Methodenbeispiel der Tab-Routing-Umschaltkomponente

CSS3 realisiert den Effekt der kontinuierlichen Dreiecksvergrößerung

Eine kurze Diskussion über die Matching-Regeln von Host und Benutzer, wenn Mysql eine Verbindung zur Datenbank herstellt

Einführung in die neuen Funktionen von MySQL 8.0.11

Detailliertes Tutorial zum Einrichten mehrerer Instanzen von MySQL 8 auf CentOS 7 (Sie können so viele haben, wie Sie möchten)

Installieren Sie mehrere PHP-Versionen für Nginx unter Linux

Beispielcode zur Implementierung von Hintergrundtransparenz und undurchsichtigem Text mit CSS3

Detailliertes Verständnis von umask in den neuen Linux-Dateiberechtigungseinstellungen

Upgrade des Windows Server 2008R2-Dateiservers auf Windows Server 2016

10 Best Practices zum Erstellen und Warten großer Vue.js-Projekte

So entfernen Sie „Enter“, „Senden“ und „Enter != Senden“ aus dem Formular

Eine dauerhafte Lösung für MySQLs Unfähigkeit, Chinesisch zu erkennen