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
Zusammenfassung der MySQL-Funktionsmethode LOAD_FILE()
In MySQL liest die Funktion LOAD_FILE() eine Date...
Linux entfernt node.js vollständig und installiert es über den Befehl yum neu
erster Schritt Einmaliges Löschen mit der integri...
Detaillierte Erklärung der CSS-Animationsattribut-Keyframes
Wie lange ist es her, dass ich meine Kolumne aktu...
Probleme mit Vue, das die Homepage von Bibibili imitiert
Technische Struktur Das Projekt ist in zwei Teile...
So fügen Sie einem Feld in MySQL eine Standardzeit hinzu
Unterschiede und Verwendungen von Datumstypen MyS...
CSS-Schreibformat, detaillierte Erklärung der Grundstruktur einer mobilen Seite
1. CSS-Schreibformat 1. Inline-Stile Sie können C...
So finden Sie den angegebenen Inhalt einer großen Datei in Linux
Denken Sie im Großen und im Kleinen und lenken Si...
JavaScript-Farbbetrachter
In diesem Artikelbeispiel wird der spezifische Ja...
Implementieren Sie dynamisches Management und Monitoring von Docker-Containern basierend auf Spring-Boot und Docker-Java [mit vollständigem Quellcode-Download]
Einführung in Docker Docker ist eine Open-Source-...
Eine detaillierte Einführung in die Linux-Verzeichnisstruktur
Wenn Sie mit dem Erlernen von Linux beginnen, müs...
So führen Sie ein Projekt mit Docker aus
1. Geben Sie das Verzeichnis ein, in dem Ihr Proj...
Detailliertes Tutorial zur Verwendung von Docker zum Erstellen einer Laravel-Entwicklungsumgebung in der Win10-Home-Version
Betriebssystem: Win10 Home Edition Installieren S...
Beispiel-Tutorial für geplante MySQL-Aufgaben
Vorwort Seit MySQL 5.1.6 wurde eine einzigartige ...
Erläuterung der grundlegenden Syntax gespeicherter Prozeduren in der MySQL-Datenbank
Löschprozedur sp_name/ Zuvor habe ich Ihnen die G...
Beschreibung der chinesischen Sortierregeln für MySQL
Bei der Verwendung von MySQL sortieren und fragen...