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
So zeigen Sie den Typ des gemounteten Dateisystems in Linux an
Vorwort Wie Sie wissen, unterstützt Linux viele D...
Ein sehr ausführliches Tutorial zur Installation von rocketmq unter Docker Desktop
Installieren Sie Docker Desktop Download-Adresse:...
Einführung in die Generierung von Kubernetes-Zertifikaten mit OpenSSL
Kubernetes unterstützt drei Arten der Authentifiz...
Ausführliche Erläuterung der MySQL-Lern-Engine, Erläuterungen und Berechtigungen
Motor Einführung Innodb-Engine Die Innodb-Engine ...
MySQL-Serie 15: Allgemeine MySQL-Konfiguration und Leistungsstresstest
1. Allgemeine MySQL-Konfiguration Alle folgenden ...
Detaillierte Erklärung verschiedener horizontaler und vertikaler Zentrierungsmethoden in HTML (Grundlagen)
Vorwort Als wir das Pferd geschrieben haben, wuss...
XHTML-Tutorial für den Einstieg: Häufig verwendete XHTML-Tags
<br />Genau wie ein Artikel sollten unsere W...
jQuery implementiert die Praxis, die Position und Größe von div durch Ziehen der Maus zu ändern
Um einen Windows Forms ähnlichen Effekt zu erziel...
Vue implementiert das Methodenbeispiel der Tab-Routing-Umschaltkomponente
Vorwort In diesem Artikel wird die Verwendung des...
Erstellen eines statischen Jenkins Docker-Agentknotens
Ein statischer Knoten ist auf einer Maschine fixi...
MySQL-Datenbankbeschränkungen und Prinzipien des Datentabellenentwurfs
Inhaltsverzeichnis 1. Datenbankbeschränkungen 1.1...
js genaue Berechnung
var numA = 0,1; var numB = 0,2; Alarm (Zahl A + Z...
Implementierung neuer Probleme mit CSS3-Selektoren
Inhaltsverzeichnis Grundlegende Selektorerweiteru...
Implementierung des Zugriffs auf den gleitenden Überprüfungscode von Vue + DRF + Drittanbietern
Inhaltsverzeichnis 1. Hintergrund 2. Verifizierun...
Ein kleiner HTML-Code fügt die Baidu-Suchleiste in Ihre Seite ein
<html> <Kopf> <meta http-equiv=&quo...