CSS3-Implementierungscode für den kreisförmigen Fortschritts-Tick-Effekt

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äche

8.1 Bildvorschau

Bildbeschreibung hier einfügen
Bildbeschreibung hier einfügen

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

CSS3 zum Erzielen von Zeitleisteneffekten

Als ich kürzlich meinen Computer einschaltete, sa...

Mysql Sql-Anweisungsübungen (50 Fragen)

Tabellenname und Felder –1. Studentenliste Studen...

Beispiele für die Erstellung und Verwendung von MySQL-Triggern

Inhaltsverzeichnis Was ist ein Auslöser Erstellen...

HTML-Auszeichnungssprache - Formular

Klicken Sie hier, um zum Abschnitt „HTML-Tutorial“...

Grundlagen der funktionalen Programmierung in JavaScript

Inhaltsverzeichnis 1. Einleitung 2. Was ist funkt...

Welche Regeln gelten für den Kontext in JavaScript-Funktionen?

Inhaltsverzeichnis 1. Regel 1: Objekt.Methode() 1...

Vue3.x verwendet mitt.js für die Komponentenkommunikation

Inhaltsverzeichnis Schnellstart Anwendung Grundpr...

Vue implementiert den Download von ZIP-Dateien

In diesem Artikelbeispiel wird der spezifische Co...

MySQL-Gruppierungsabfragen und Aggregatfunktionen

Überblick Ich glaube, dass wir häufig auf solche ...

Beispiel für den Aufbau eines Jenkins-Dienstes mit Docker

Ziehen Sie das Bild root@EricZhou-MateBookProX: D...

Tutorial zum Herunterladen, Installieren und Bereitstellen von Tomcat für IDEA (mit zwei Hot-Deployment-Einstellungsmethoden für IDEA)

Inhaltsverzeichnis Tomcat-Download-Tutorial Tutor...

CSS zum Erzielen eines Beispielcodes für eine Bildlaufleiste

Auf manchen Websites sieht man oft Bilder, die ko...

Implementierung eines Docker-Compose-Bereitstellungsprojekts basierend auf MySQL8

1. Erstellen Sie zunächst den entsprechenden Ordn...

CSS verwendet das Autoflow-Attribut, um einen Sitzauswahleffekt zu erzielen

1. Autoflow-Attribut: Wenn die Länge und Breite d...

Detaillierter Prozess zum Dekomprimieren und Installieren von mysql5.7.17 zip

1. Adresse herunterladen https://dev.mysql.com/do...