svg+css oder js zum Erstellen eines Tick-Animationseffekts

Mein Chef hatte mich gebeten, ein Programm zu erstellen, das nach dem Anmelden ein Häkchen anzeigt, aber ich konnte es auf Baidu nicht finden. Heute habe ich bei Bilibili ein Video gesehen, das tatsächlich einige Verbesserungen auf der Grundlage der Anforderungen vornahm. Schauen wir uns ohne weiteres die Wirkung an!

HTML Quelltext

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <title>Kontrollkästchen-Animation</title>
</Kopf>
<Text>
<div id="d1">
    <Eingabetyp="Kontrollkästchen" Stil="Anzeige: keine" ID="Liebe1" />
    <label for="love1" id="btn1" >Fertig</label>
<svg Breite="200px" Höhe="200px">
    <circle r="90" class="circle" fill="none" stroke="#2de540" stroke-width="10" cx="100" cy="100" stroke-linecap="round" transform="drehen(-90 100 100) " ></circle>
    <polyline fill="none" stroke="#2de540" stroke-width="10" points="44,107 86,137 152,69" stroke-linecap="rund" stroke-linejoin="rund" class="tick" ></polyline>
</svg>
<h2 style="text-align: center;width: 200px">Erfolg</h2>

</div>
</body>
<!--Stellen Sie hier Ihr lokales jq vor-->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</html>

CSS Code

h2 {
        Schriftfamilie: Helvetica;
        Schriftgröße: 30px;
        Rand oben: 20px;
        Farbe: #333;
        Deckkraft: 0;
    }
    Eingabe[Typ="Kontrollkästchen"]:aktiviert+ Bezeichnung ~ h2 {
        Animation: 0,6 s Titel-Einblendung;
        Animationsverzögerung: 1,2 s;
        Animationsfüllmodus: vorwärts;
    }
    .Kreis {
        Schlaganfall-Dasharray: 1194;
        Strich-Schlagstock: 1194;
    }
    Eingabe [Typ = "Kontrollkästchen"]: aktiviert + Bezeichnung + svg .circle {
        Animation: Kreis 1 Sekunde, Ein- und Ausfahren;
        Animationsfüllmodus: vorwärts;
    }
    .tick {
        Schlaganfall-Dasharray: 350;
        Hub-Schlagschrauber-Höhe: 350;
    }
    Eingabe [Typ = "Kontrollkästchen"]: aktiviert + Etikett + svg .tick {
        Animation: Tick 0,8 s Ausklang;
        Animationsfüllmodus: vorwärts;
        Animationsverzögerung: 0,95 s;
    }
    @keyframes Kreis {
        aus {
            Strich-Schlagsatz: 1194;
        }
        Zu {
            Strich-Schlagsatz: 2388;
        }
    }
    @keyframes Häkchen {
        aus {
            Hub-Schlagschrauber-Höhe: 350;
        }
        Zu {
            Strich-Dashoffset: 0;
        }
    }
    @keyframes Titel {
        aus {
            Deckkraft: 0;
        }
        Zu {
            Deckkraft: 1;
        }
    }
    Etikett {
        Anzeige: Inline-Block;
        Höhe: 38px;
        Breite: 38px;
        Zeilenhöhe: 38px;
        Polsterung: 0 18px;
        Hintergrundfarbe: #1E9FFF;
        Farbe: #fff;
        Leerzeichen: Nowrap;
        Textausrichtung: zentriert;
        Schriftgröße: 14px;
        Rand: keiner;
        Rahmenradius: 2px;
        Cursor: Zeiger;
    }
    #d1 {
        Anzeige: Flex;
        Inhalt ausrichten: zentriert;
        Mindesthöhe: 100px;
        Flex-Richtung: Spalte;
    }

Ich hätte hier aufhören sollen, aber wenn wir die Funktion tatsächlich implementieren, ist es unwahrscheinlich, dass wir ein Kontrollkästchen verwenden, um die Anzeige des Animationseffekts umzuschalten. Im Allgemeinen werden immer noch Schaltflächen benötigt, um den Animationseffekt zu steuern. Das Folgende ist der Code für die jq-Operation. Eigentlich ist es besser, .animate() von jq zu verwenden, aber ich bin ein Neuling, also war ich faul (ps: nun, ich weiß nicht, wie das geht) und habe direkt .css() verwendet

JavaScript-Code

  $("#btn1").on("klicken",Funktion () {
       wenn($(this).text()==="abgeschlossen"){
           $(".circle").css({'animation':'Kreis 1s ease-in-out','animation-fill-mode':'vorwärts'});
           $(".tick").css({'animation':'tick .8s ease-out','animation-fill-mode':'forwards','animation-delay':'.95s'});
           $("h2").css({'Animation':'.6s Titel-Ein-Aus','Animation-Füllmodus':'Vorwärts','Animation-Verzögerung':'1,2s'})
           $(this).text("Abbrechen")
       }anders{
           $(".circle").css({'animation':'keine','animation-fill-mode':'keine'});
           $(".tick").css({'animation':'keine','animation-fill-mode':'keine'});
           $("h2").css({'Animation':'keine','Animation-Füllmodus':'keine'})
           $(this).text("Abgeschlossen")
       }
   });

Dies ist das Ende dieses Artikels zum Erstellen eines Häkchen-Animationseffekts mit SVG+CSS oder JS. Weitere relevante Inhalte zu SVG-CSS-Häkchen-Animationen finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Farbschemata für Websites Die richtigen Farben für Ihre Website auswählen

>>: Verwenden Sie Docker Compose, um ELK schnell bereitzustellen (getestet und effektiv)

Verwenden der Docker+Jenkins+Python3-Umgebung zum Erstellen eines äußerst detaillierten Tutorials

svg+css oder js zum Erstellen eines Tick-Animationseffekts

Verwenden der Docker+Jenkins+Python3-Umgebung zum Erstellen eines äußerst detaillierten Tutorials

MySQL-Triggerprinzip und Analyse von Anwendungsbeispielen

So installieren Sie Docker unter CentOS und veröffentlichen Docker remote in Springboot

Detaillierte Analyse der SQL-Ausführungsschritte

Beispielanalyse der Intervallberechnung von MySQL-Datum und -Uhrzeit

Mit CSS3 erstellter Hover-Zoom-Effekt

Zusammenfassung der Projektentwicklungspraxis in Kombination mit Vue3 von TypeScript

Vue implementiert eine Online-Vorschau von PDF-Dateien (mithilfe von pdf.js/iframe/embed)

Reines CSS3 realisiert den Effekt des Ein- und Austretens von Divs in der richtigen Reihenfolge

js Promise-Methode zur gleichzeitigen Steuerung

Artikel empfehlen

Das Vue-Projekt realisiert den Paging-Effekt

HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (5)

Gojs implementiert Ameisenlinien-Animationseffekt

MySQL-Kodierung utf8 und utf8mb4 utf8mb4_unicode_ci und utf8mb4_general_ci

MySQL 8.0.21-Installationstutorial unter Windows-System (Abbildung und Text)

Codebeispiele für allgemeine Docker-Datenvolumenvorgänge

Der Unterschied zwischen ID- und Name-Attributen von HTML-Elementen

So verwenden Sie Node.js, um festzustellen, ob ein PNG-Bild transparente Pixel hat

Implementieren einer verteilten Sperre mit MySQL

So verweisen Sie im WeChat-Applet wxss auf externe CSS-Dateien und Iconfonts

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

Das Phänomen des Margin-Top-Collapses und die spezifische Lösung

Methode zur Implementierung von Website-Hintergrundmusik

Lernen Sie die Grundlagen der JavaScript-DOM-Operationen in einem Artikel

Singleton-Entwurfsmuster in JavaScript