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
Die 10 klassischen Optimierungsfälle und -szenarien von MySQL
Inhaltsverzeichnis 1. Allgemeine Schritte zur SQL...
Detaillierte grafische Erläuterung der MySql5.7.18-Zeichensatzkonfiguration
Hintergrund: Vor langer Zeit (2017.6.5, der Artik...
JS+CSS zur Realisierung einer dynamischen Uhr
In diesem Artikelbeispiel wird der spezifische Co...
Detaillierte Beschreibung des Anwendungsszenarios für Javascript-Closure
Inhaltsverzeichnis 1. Abschluss 2. Szenarien für ...
Zusammenfassung der Verwendung des CSS-Bereichs (Stilaufteilung)
1. Verwendung des CSS-Bereichs (Stilaufteilung) I...
So implementieren Sie eine MySQL-Master-Slave-Replikation basierend auf Docker
Vorwort Die MySQL Master-Slave-Replikation ist di...
So entfernen Sie in Linux ganz einfach installierte Quellpakete
Schritt 1: Stow installieren In diesem Beispiel v...
Ein kurzes Verständnis der relevanten Sperren in MySQL
Dieser Artikel soll Ihnen vor allem dabei helfen,...
Zusammenfassung der JavaScript-Timertypen
Inhaltsverzeichnis 1.setInterval() 2.setTimeout()...
Installations-Tutorial für die grüne Version von MySQL 5.7 unter einem 64-Bit-System von Windows 2008
Vorwort In diesem Artikel wird das Installationst...
Verwendung und Unterschied von Js-Modulverpackungsexporten erfordern Import
Inhaltsverzeichnis 1. Commonjs-Exporte und erford...
Zusammenfassung der täglichen Verwaltungsbefehle von mysqladmin unter MySQL (unbedingt lesen)
Das Verwendungsformat des mysqladmin-Tools ist: m...
Detaillierte Erklärung der Zeit- und Datumsverarbeitung von moment.js
Konvertierung des Zeitformats von Montag auf Sonn...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17
Funktionen von MySQL: MySQL ist ein relationales ...
Chinesische Lösung und Beispielcode für die MySQL-Volltextsuche
MySQL-Volltextsuche, chinesische Lösung Kürzlich ...