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
Optimieren Sie die Speichereffizienz von BLOB- und TEXT-Spalten in InnoDB-Tabellen
Lassen Sie uns zunächst einige wichtige Punkte zu...
Zusammenfassung einiger meiner häufig verwendeten Linux-Befehle
Ich habe zwei Jahre lang im Betrieb und in der Wa...
Detaillierte Einführung in die Installations- und Konfigurationsregeln von Nginx
Inhaltsverzeichnis 1. Installation und Betrieb vo...
9 praktische Tipps zum Erstellen von Webinhaltsseiten
Inhalt 1. Geben Sie den Lesern einen Grund zu blei...
MySQL query_cache_type-Parameter und Verwendungsdetails
Der Zweck der Einrichtung eines MySQL-Abfragecach...
CSS3-Zeitleistenanimation
Ergebnisse erzielen html <h2>CSS3-Zeitleist...
Eine kurze Analyse der Konfigurationselemente des Angular CLI-Releasepfads
Vorwort Bei der Projektfreigabe ist immer eine Ve...
Verwendung und Beschreibung des HTML-Tags tbody
Das Tbody-Element sollte in Verbindung mit den Ele...
Detaillierte Erläuterung der Idee, mit CSS-Animation den Punkteeffekt zu erzielen
Im aktuellen Projekt müssen wir einen Effekt zum ...
Datagrip2020 kann MySQL-Treiber nicht herunterladen
Wenn Sie es nicht durch direktes Klicken auf „Dow...
So richten Sie das Terminal so ein, dass Anwendungen nach dem Start von Ubuntu ausgeführt werden
1. Geben Sie „Start“ in die Menüleiste ein und kl...
MySQL-Lernaufzeichnung: Blutiger Vorfall durch KEY-Partition verursacht
Nachfragehintergrund Ein Teil der Daten in der Ge...
10 Gründe, warum Linux immer beliebter wird
Linux wird von immer mehr Benutzern geliebt. Waru...
Hinweise zu den Formularkomponenten des Elements
Elementform und Codeanzeige Weitere Einzelheiten ...
Probleme und Lösungen für MYSQL5.7.17-Verbindungsfehler unter MAC
Das Problem, dass MYSQL5.7.17 unter MAC keine Ver...