CSS3-Implementierungscode für den kreisförmigen Fortschritts-Tick-Effekt
|
Artikelverzeichnis 8. CSS3 Klick-Button - kreisförmiger Fortschritts-Tick-Effekt 8.1 Bildvorschau 8.2 index.html-Code 8.3 style.css-Code 8. Kreisförmiger Fortschritts-Tick-Effekt mit CSS3-Klickschaltfläche8.1 Bildvorschau
8.2 index.html-Code<!DOCTYPE html> <html lang="de"> <Kopf> <meta charset="UTF-8"> <title>CSS3-Klick-Button mit kreisförmigem Fortschritts-Tick-Effekt</title> <!--Symbolbibliothek--> <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css'> <!--Kernstil--> <link rel="stylesheet" href="css/style.css"> </Kopf> <Text> <div Klasse="Hintergrund"> <Eingabetyp="Kontrollkästchen" id="Schaltfläche"> <label for="button" class="button"> Klicken Sie auf die Schaltfläche<i class="fas fa-check"></i></label> <svg Klasse="Kreis"> <Kreis cx="32" cy="32" r="31"> </svg> </div> </body> </html> 8.3 style.css-Code
Körper {
Rand: 0;
Höhe: 100vh;
Breite: 100vw;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Inhalt ausrichten: zentriert;
Schriftfamilie: „Lucida Sans Unicode“, „Lucida Grande“, serifenlos;
Schriftgröße: 14px;
}
.Hintergrund {
Position: relativ;
Hintergrund: linearer Farbverlauf (nach oben, #49b26e 0 %, #57d895 100 %);
Rahmenradius: 5px;
Anzeige: Flex;
Elemente ausrichten: zentrieren;
Inhalt ausrichten: zentriert;
Flex-Richtung: Spalte;
Kastenschatten: 0 5px 15px 0 rgba (0, 0, 0, 0,25);
Breite: 400px;
Höhe: 400px;
Farbe: weiß;
}
.Hintergrundeingabe {
Anzeige: keine;
}
.Hintergrund .Schaltfläche {
Anzeige: Flex;
Inhalt ausrichten: zentriert;
Elemente ausrichten: zentrieren;
Breite: 260px;
Höhe: 60px;
Rand: 2px durchgehend weiß;
Rahmenradius: 30px;
Textausrichtung: zentriert;
Schriftgröße: 20px;
Texttransformation: Großbuchstaben;
Schriftstärke: fett;
Buchstabenabstand: 2px;
Übergang: alle 0,3 s Ein- und Ausfahren;
Cursor: Zeiger;
}
.Hintergrund .Button:hover {
Hintergrundfarbe: #37be77;
}
.Hintergrund .Schaltfläche .fas {
Position: absolut;
Farbe: #4caf50;
Z-Index: 2;
Deckkraft: 0;
}
.Hintergrund .Kreis {
Position: absolut;
Breite: 65px;
Höhe: 65px;
Füllung: keine;
Strich: weiß;
Strichbreite: 2px;
Strichlinienende: rund;
Strich-Dasharray: 183 183;
Strich-Schlag-Höhe: 183;
Deckkraft: 0;
links: 0;
unten: 0;
rechts: 0;
oben: 0;
Rand: automatisch;
Zeigerereignisse: keine;
transformieren: drehen (-90 Grad);
}
.Hintergrundeingabe:aktiviert~.button {
Animation: Schaltfläche 0,5 s, beide beschleunigen, 0,5 s füllen, 1,5 s vorwärts beschleunigen;
}
.Hintergrundeingabe:aktiviert~.Button .fas {
Animation: 0,5 s Auslaufzeit prüfen, 1,5 s, beides;
}
.Hintergrundeingabe:aktiviert~.Kreis {
Animation: Kreis 2 s, Auslaufen 0,5 s, beides;
}
@keyframes-Schaltfläche {
0% {
Breite: 260px;
links: 70px;
Rahmenfarbe: weiß;
Farbe: weiß;
}
50 % {
Farbe: transparent;
}
100 % {
Breite: 60px;
links: 170px;
Rahmenfarbe: #45b078;
Hintergrund: transparent;
Farbe: transparent;
}
}
@keyframes Kreis {
0% {
Strich-Schlag-Höhe: 183;
}
50 % {
Strich-Dashoffset: 0;
Schlaganfall-Dasharray: 183;
transformieren: drehen (-90 Grad) skalieren (1);
Deckkraft: 1;
}
90%,
100 % {
Strich-Dasharray: 500 500;
transformieren: drehen (-90 Grad) skalieren (2);
Deckkraft: 0;
}
}
@keyframes füllen {
0% {
Hintergrund: transparent;
Rahmenfarbe: weiß;
}
100 % {
Hintergrund: weiß;
}
}
@keyframes prüfen {
0% {
Deckkraft: 0;
}
100 % {
Deckkraft: 1;
}
}Dies ist das Ende dieses Artikels über den kreisförmigen Fortschritts-Tick-Effekt der CSS3-Klickschaltfläche. Weitere verwandte Inhalte zur kreisförmigen Fortschrittsschaltfläche der CSS3 finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Eine einfache Methode, um mit der Mindestbreite und Mindesthöhe von IE6 kompatibel zu sein
>>: Eine detaillierte Einführung in die Linux-Systemkonfiguration (Dienststeuerung)
Artikel empfehlen
Einfache Verwendung des Vue Vee-Validate-Plugins
Inhaltsverzeichnis 1. Installation 2. Import 3. V...
10 HTML-Tabellen-bezogene Tags
Tatsächlich werden viele Leute sagen: „Ich habe ge...
Detailliertes Tutorial zum Herunterladen von MySQL unter Windows 10
MySQL-Versionen werden in Enterprise Edition und ...
Zusammenfassung der Verwendung des CSS-Bereichs (Stilaufteilung)
1. Verwendung des CSS-Bereichs (Stilaufteilung) I...
So öffnen Sie das MySQL-Binlog-Protokoll
Binlog ist eine binäre Protokolldatei, die alle M...
So implementieren Sie die Komprimierung von Webseiten im Nginx-Optimierungsdienst
Konfigurieren Sie die Webseitenkomprimierung, um ...
Detaillierte Erläuterung der Schreibreihenfolge und Ausführungsreihenfolge von SQL-Abfrageanweisungen der MySQL-Reihe
Inhaltsverzeichnis 1. Die Schreibreihenfolge eine...
Installation der virtuellen Maschine Kali Linux Vmware (Abbildung und Text)
Vorbereitung: 1. Installieren Sie die VMware Work...
So erstellen Sie eine my.ini-Datei im MySQL 5.7.19-Installationsverzeichnis
Im vorherigen Artikel habe ich das ausführliche T...
MySQL 5.7 MySQL-Befehlszeilenclient - Befehlsdetails
MySQL 5.7 MySQL-Befehlszeilenclient mit Befehlen ...
Implementierung der Breakpoint-Wiederaufnahme in Node.js
Vorwort Normaler Geschäftsbedarf: Hochladen von B...
So ändern Sie Flash-SWF-Dateien in Webseiten
Ich denke, dies ist ein Problem, auf das viele Leu...
js, um den Effekt des Ziehens des Schiebereglers zu erzielen
In diesem Artikel finden Sie den spezifischen Cod...
Lösung für Primärschlüsselkonflikte, wenn innodb_index_stats beim Importieren von Sicherungsdaten einen Fehler meldet
Fehlerbeschreibung percona5.6, mysqldump vollstän...
Zusammenfassung der Lösung für den Webpack -v-Fehler von Vue
Xiaobai lernte Vue kennen, dann lernte er Webpack...