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)
Artikel empfehlen
Detaillierte Analyse von MySQL-Ausführungsplänen
Vorwort Als wir im vorherigen Interviewprozess na...
Detailliertes Tutorial zur Installation von qt5.12.8 und Umgebungskonfiguration auf Ubuntu18.04
Umfeld System: Ubuntu 18.04 Software: qt5.12.8 1....
So erstellen Sie eine Deep-Learning-Umgebung mit Python in einem Docker-Container
Überprüfen Sie die Virtualisierung im Task-Manage...
Verwenden Sie sauberes HTML-Markup zum Erstellen Ihrer Seiten
Das Internet ist ein Organismus, der sich ständig...
Eine vollständige Liste häufig gestellter JavaScript-Fragen für Front-End-Interviews
Inhaltsverzeichnis 1. Handschriftliche Instanz vo...
Erläuterung der Docker Compose-Netzwerkeinstellungen
Grundlegende Konzepte Standardmäßig erstellt Comp...
Eine kurze Analyse des Reaktionsprinzips und der Unterschiede von Vue2.0/3.0
Vorwort Seit der offiziellen Einführung von vue3....
Tipps zum Organisieren von Zeichenfolgen in Linux
Bei Linux-Operationen ersetzen und zählen wir häu...
Zusammenfassung zum Erstellen und Verwenden von Array-Methoden in Bash-Skripten
Definieren eines Arrays in Bash Es gibt zwei Mögl...
Schreiben Sie einen formellen Blog mit XHTML CSS
Der vollständige Name von Blog sollte Weblog sein...
Vereinfachen Sie die komplexe Website-Navigation
<br />Das Navigationsdesign stellt eine der ...
Die Beziehung zwischen JS-Konstruktor und Instanziierung sowie Prototypeinführung
Inhaltsverzeichnis 1. Konstruktor und Instanziier...
Zusammenfassung gängiger Nginx-Techniken und Beispiele
1. Priorität mehrerer Server Wenn beispielsweise ...
Ausführliches Installationstutorial für MySQL Installer Community 5.7.16
Dieser Artikel zeichnet das ausführliche Tutorial...
Detaillierte Schritte zum Einrichten eines Nexus-Servers
1. Die Bedeutung des Aufbaus eines Nexus-Dienstes...