Beispiel für die Erstellung einer kreisförmigen Scroll-Fortschrittsbalken-Animation mit CSS3
|
Thema Heute werde ich Ihnen zeigen, wie Sie mit CSS3 eine kreisförmige Fortschrittsbalkenanimation erstellen. Das ist ganz einfach zu lernen! Also, was genau ist es? Keine Sorge, ich habe schon einmal einen Blog darüber veröffentlicht, wie man mit CSS Fortschrittsbalkeneffekte erzielen kann: „CSS erzielt Fortschrittsbalken und Reihenfolge-Fortschrittsbalken“, aber dieser Blog hat nur den Effekt erzeugt, und es gab keinen Animationseffekt. Da ich zu der Zeit für die Abschlussprüfung lernte, habe ich mir den Zeitaufwand für die Erstellung von Animationen gespart. Also, lasst uns heute gemeinsam allerlei Effekte realisieren! Inhalt Schauen wir uns zunächst die Renderings an, die unser Interesse am Lernen steigern:
Okay, ich werde es anhand dieses Bildes von oben nach unten erklären. Da der erste und zweite Effekt im Blog „CSS-Fortschrittsbalken und Bestellfortschrittsbalken“ vorgestellt wurden, werde ich mich hier auf die Animation konzentrieren. Der Kreiseffekt ist der entscheidende Punkt und ich werde ihn ausführlich erklären. Der erste Effekt: HTML-Struktur:
<div id="Fortschritt">
<span></span>
</div>CSS-Stil:
#Fortschritt{
Breite: 50%;
Höhe: 30px;
Rand: 1px durchgezogen #ccc;
Rahmenradius: 15px;
Rand: 50px 0 0 100px;
Überlauf: versteckt;
Box-Schatten: 0 0 5px 0px #ddd Einschub;
}
#Fortschrittsspanne {
Anzeige: Inline-Block;
Breite: 100 %;
Höhe: 100%;
Hintergrund: #2989d8; /* Alte Browser */
Hintergrund: -moz-linear-gradient(45 Grad, #2989d8 33 %, #7db9e8 34 %, #7db9e8 59 %, #2989d8 60 %); /* FF3.6+ */
Hintergrund: -webkit-gradient(linear, links unten, rechts oben, Farbstopp(33%,#2989d8), Farbstopp(34%,#7db9e8), Farbstopp(59%,#7db9e8), Farbstopp(60%,#2989d8)); /* Chrome,Safari4+ */
Hintergrund: -webkit-linear-gradient(45 Grad, #2989d8 33 %, #7db9e8 34 %, #7db9e8 59 %, #2989d8 60 %); /* Chrome 10+, Safari 5.1+ */
Hintergrund: -o-linear-gradient(45 Grad, #2989d8 33 %, #7db9e8 34 %, #7db9e8 59 %, #2989d8 60 %); /* Opera 11.10+ */
Hintergrund: -ms-linear-gradient(45 Grad, #2989d8 33 %, #7db9e8 34 %, #7db9e8 59 %, #2989d8 60 %); /* IE10+ */
Hintergrund: linearer Farbverlauf (45 Grad, #2989d8 33 %, #7db9e8 34 %, #7db9e8 59 %, #2989d8 60 %); /* W3C */
Filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* IE6-9-Fallback auf horizontalen Farbverlauf */
Hintergrundgröße: 60px 30px;
Textausrichtung: zentriert;
Farbe: #fff;
-webkit-animation: 3 s Einsteigerprogramm laden;
}
@-webkit-keyframes laden{
0 %{
Breite: 0%;
}
100 %{
Breite: 100 %;
}
}Sie sehen, dass diese Art der Fortschrittsbalkenanimation tatsächlich am einfachsten umzusetzen ist. Stellen Sie einfach den Standardbreitenprozentsatz und den Breitenprozentsatz in der Animation entsprechend dem spezifischen Fortschrittsprozentsatz auf 100 % ein. Wenn ich beispielsweise einen 70 %-Fortschrittsbalkenanimationseffekt erzielen möchte, muss ich nur zwei Stellen ändern:
#Fortschrittsspanne{
Breite: 70%;
}
@-webkit-keyframes laden{
0 %{
Breite: 0%;
}
100 %{
Breite: 70 %;
}
}Zweiter Effekt: HTML-Struktur:
<div id="Fortschrittsleiste">
<!-- Fortschrittsbalken -->
<div>
<span></span>
</div>
<!-- Fünf Kreise -->
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>CSS-Stil:
#fortschrittsleiste{
Breite: 80%;
Höhe: 50px;
Position: relativ;
Rand: 50px 0 0 100px;
}
#progressBar div{
Breite: 100 %;
Höhe: 10px;
Position: absolut;
oben: 50 %;
links: 0;
Rand oben: -20px;
Hintergrund: #ccc;
}
#progressBar div span {
Position: absolut;
Anzeige: Inline-Block;
Hintergrund: grün;
Höhe: 10px;
Breite: 100 %;
-webkit-animation:bgLoad 5,5 s linear;
}
@-webkit-keyframes bgLoad{
0 %{
Breite: 0%;
}
18,18 %, 27,27 % {
Breite: 25 %;
}
45,45 %, 54,54 % {
Breite: 50%;
}
72,72 %, 81,81 % {
Breite: 75 %;
}
100 %{
Breite: 100 %;
}
}
#progressBar>span{
Position: absolut;
oben: 0;
Rand oben: -10px;
Breite: 40px;
Höhe: 40px;
Randradius: 50 %;
Hintergrund: #ccc;
Rand links: -20px;
Farbe: #fff;
}
@-webkit-keyframes circleLoad_1{
0 %, 66,66 % {
Hintergrund: #ccc;
}
100 %{
Hintergrund: grün;
}
}
@-webkit-keyframes circleLoad_2{
0%,83,34%{
Hintergrund: #ccc;
}
100 %{
Hintergrund: grün;
}
}
@-webkit-keyframes circleLoad_3{
0%,88,88%{
Hintergrund: #ccc;
}
100 %{
Hintergrund: grün;
}
}
@-webkit-keyframes circleLoad_4{
0%,91,67%{
Hintergrund: #ccc;
}
100 %{
Hintergrund: grün;
}
}
#progressBar span:nth-child(2){
links: 0 %; Hintergrund: grün;
}
#progressBar span:nth-child(3){
links: 25 %; Hintergrund: grün;
-webkit-animation:circleLoad_1 1,5 s Einlaufzeit;
}
#progressBar span:nth-child(4){
links: 50 %; Hintergrund: grün;
-webkit-animation:circleLoad_2 3s Einsteigererlebnis;
}
#progressBar span:nth-child(5){
links: 75 %; Hintergrund: grün;
-webkit-animation:circleLoad_3 4,5 s Einlaufzeit;
}
#progressBar span:nth-child(6){
links: 100 %; Hintergrund: grün;
-webkit-animation:circleLoad_4 6s Einsteigerzeit;
}Wie Sie sehen, ist die Animation selbst eigentlich sehr einfach und leicht zu verstehen. Sie beinhaltet hauptsächlich die Berechnung der Dauer der Animation. Da dieser Animationseffekt nur einmal ausgeführt wird, können Sie die Animationsverzögerungszeit tatsächlich verwenden, um sicherzustellen, dass jede Animation zu einem bestimmten Zeitpunkt startet. Bei Schleifen oder mehreren Animationseffekten ist die Verzögerung jedoch nicht flexibel, sodass die Dauer hier weiterhin verwendet wird, um die Ausführungszeit der Animation zu steuern. Für diesen Auftragsfortschrittsbalken habe ich ihn so eingestellt, dass er 1 Sekunde braucht, um einen Abschnitt zu verschieben, und dann bei jedem Punkt für 0,5 Sekunden pausiert, und diese 0,5 Sekunden sind die Dauer der Animation des entsprechenden Punkts. Ich muss aber nochmal betonen, dass es sich hier um eine einzelne Animation handelt. Möchtest du eine Loop-Animation umsetzen, musst du noch Anpassungen vornehmen. Die Dauer aller Animationen muss gleich sein, sonst wird der Loop unübersichtlich. Die Änderung der Zeit wirkt sich auch auf die Änderung der Keyframes der Animation aus. Nachfolgend finden Sie eine Erläuterung der Animationszeit des ersten Segments und des zweiten Kreises: Zunächst wird die Animationsdauer des dünnen Streifens wie folgt berechnet: 4 Segmente x 1 Sekunde + 3 Punkte in der Mitte x 0,5 Sekunden = 5,5 Sekunden Der nächste Schritt besteht darin, die zeitliche Verteilung der Schlüsselbilder der langen und dünnen Streifenanimation zu berechnen. Angenommen, jeder Abschnitt ist 0,5 Sekunden lang, gibt es insgesamt 11 Abschnitte, 2 Abschnitte für jedes kleine Segment und 1 Abschnitt für jeden Punkt. Teilen Sie 100 % durch 11, und Sie erhalten, dass jeder Abschnitt ungefähr 9,09 % beträgt. Der nächste Schritt besteht darin, die Zeit zuzuordnen, was einfach ist und zu dem ich nicht viel sagen werde. Wenn der dünne Streifen als Nächstes das erste Segment des Animationseffekts abgeschlossen hat und den zweiten Punkt erreicht, hält er für 0,5 Sekunden an. Diese 0,5 Sekunden sind die Animationszeit des zweiten Punkts. Die Animationsdauer des zweiten Punkts beträgt also: Warten Sie, bis der Streifen die Ausführung von 1 Segment x 1 Sekunde + seiner eigenen Animationsabschlusszeit x 0,5 Sekunden = 1,5 Sekunden abgeschlossen hat. Berechnen Sie mit der gleichen Methode die Zeit für jede Portion und teilen Sie diese anschließend zu. Auch andere Animationseffekte sind ähnlich und werden hier nicht näher erläutert. Der dritte Effekt: Heute werde ich mich auf diesen Effekt konzentrieren. Wenn Sie jemand fragt, ob Sie einen kreisförmigen Fortschrittsbalkeneffekt erstellen können, ist es zunächst ganz einfach, wenn es sich um einen statischen, vollständig kreisförmigen Fortschrittsbalken handelt:
.circleprogress{
Breite: 160px;
Höhe: 160px;
Rand: 20px durchgehend rot;
Randradius: 50 %;
}
.circleprogress{
Breite: 160px;
Höhe: 160px;
Rand: 20px durchgehend rot;
Rahmen links: 20px durchgehend transparent;
Rahmen unten: 20px durchgehend transparent;
Randradius: 50 %;
}
Dann würde ich trotzdem sagen, das ist nicht schwer. Was aber, wenn es sich nicht um genaue Vielfache von 45 Grad handelt? OK, richten wir zunächst ein 200 x 200 großes Quadrat ein und vervollständigen dann unseren Effekt darin:
.circleProgress_wrapper{
Breite: 200px;
Höhe: 200px;
Rand: 50px automatisch;
Position: relativ;
Rand: 1px durchgezogen #ddd;
}
Als nächstes lege ich zwei weitere Rechtecke in diesen Container, die jeweils die Hälfte des Platzes einnehmen:
<div Klasse="circleProgress_wrapper">
<div Klasse="Wrapper rechts">
<div Klasse = "circleProgress rightcircle"></div>
</div>
<div Klasse="Wrapper links">
<div Klasse = "circleProgress leftcircle"></div>
</div>
</div>
.Verpackung{
Breite: 100px;
Höhe: 200px;
Position: absolut;
oben: 0;
Überlauf: versteckt;
}
.Rechts{
rechts:0;
}
.links{
links: 0;
}
Hier möchten wir betonen, dass overflow:hidden; von .wrapper eine Schlüsselrolle spielt. Die Überlaufverbergung ist für beide Rechtecke eingestellt, d. h. wenn wir den Kreis innerhalb des Rechtecks drehen, wird der Überlaufteil verborgen, sodass wir den gewünschten Effekt erzielen können. Wie wir aus der HTML-Struktur ersehen können, befindet sich innerhalb des linken und rechten Rechtecks jeweils ein Kreis. Lassen Sie uns zuerst über den rechten Halbkreis sprechen:
.circleProgress{
Breite: 160px;
Höhe: 160px;
Rand: 20px durchgehend transparent;
Randradius: 50 %;
Position: absolut;
oben: 0;
}
.Rechtskreis{
Rahmen oben: 20px, durchgehend grün;
Rahmen rechts: 20px, durchgehend grün;
rechts:0;
}
Wie Sie sehen, ist der Effekt herausgekommen. Eigentlich war es ursprünglich ein Halbkreisbogen, aber da wir den oberen und rechten Rand festgelegt haben, ist die Hälfte des oberen Rands übergelaufen und ausgeblendet, sodass wir ihn durch Drehen wiederherstellen können:
.circleProgress{
Breite: 160px;
Höhe: 160px;
Rand: 20px durchgehend transparent;
Randradius: 50 %;
Position: absolut;
oben: 0;
-webkit-transform: drehen(45 Grad);
}
Sie können also einen Fortschrittsbalken in jeder beliebigen Proportion erreichen, indem Sie ihn einfach im gewünschten Winkel drehen. Als nächstes implementieren Sie den linken Halbbogen, um einen vollständigen Kreis daraus zu machen:
.linker Kreis{
Rahmen unten: 20px, durchgehend grün;
Rahmen links: 20px, durchgehend grün;
links: 0;
}
Als nächstes müssen wir es bewegen. Das Prinzip besteht darin, dass wir zuerst den rechten Halbkreisbogen um 180 Grad drehen und dann den linken Halbkreisbogen um 180 Grad drehen. Auf diese Weise verschwinden die beiden Halbkreise, weil sie nacheinander überlaufen, sodass es so aussieht, als würde der Fortschrittsbalken erneut rollen:
.Rechtskreis{
Rahmen oben: 20px, durchgehend grün;
Rahmen rechts: 20px, durchgehend grün;
rechts:0;
-webkit-animation: circleProgressLoad_right 5s linear unendlich;
}
.linker Kreis{
Rahmen unten: 20px, durchgehend grün;
Rahmen links: 20px, durchgehend grün;
links: 0;
-webkit-animation: circleProgressLoad_left 5s linear unendlich;
}
@-webkit-keyframes circleProgressLoad_right{
0 %{
-webkit-transform: drehen(45 Grad);
}
50 %, 100 % {
-webkit-transform: drehen(225 Grad);
}
}
@-webkit-keyframes circleProgressLoad_left{
0 %, 50 % {
-webkit-transform: drehen(45 Grad);
}
100 %{
-webkit-transform: drehen(225 Grad);
}
}
Natürlich müssen wir nur den Winkel anpassen, um den umgekehrten Effekt zu erzielen:
.circleProgress{
Breite: 160px;
Höhe: 160px;
Rand: 20px durchgehend transparent;
Randradius: 50 %;
Position: absolut;
oben: 0;
-webkit-transform: drehen(-135 Grad);
}
@-webkit-keyframes circleProgressLoad_right{
0 %{
-webkit-transform: drehen(-135 Grad);
}
50 %, 100 % {
-webkit-transform: drehen(45 Grad);
}
}
@-webkit-keyframes circleProgressLoad_left{
0 %, 50 % {
-webkit-transform: drehen(-135 Grad);
}
100 %{
-webkit-transform: drehen(45 Grad);
}
}
OK, der nächste Schritt besteht darin, den endgültigen Effekt zu erzielen. Wie wir am Anfang gesehen haben, ähnelt er ein wenig dem Effekt, wenn wir 360 Guard verwenden, um Müll zu bereinigen, aber natürlich ist er nicht sehr ähnlich:
.circleProgress_wrapper{
Breite: 200px;
Höhe: 200px;
Rand: 50px automatisch;
Position: relativ;
Rand: 1px durchgezogen #ddd;
}
.Verpackung{
Breite: 100px;
Höhe: 200px;
Position: absolut;
oben: 0;
Überlauf: versteckt;
}
.Rechts{
rechts:0;
}
.links{
links: 0;
}
.circleProgress{
Breite: 160px;
Höhe: 160px;
Rand: 20px durchgezogenes RGB (232, 232, 12);
Randradius: 50 %;
Position: absolut;
oben: 0;
-webkit-transform: drehen(45 Grad);
}
.Rechtskreis{
Rahmen oben: 20px, durchgehend grün;
Rahmen rechts: 20px, durchgehend grün;
rechts:0;
-webkit-animation: circleProgressLoad_right 5s linear unendlich;
}
.linker Kreis{
Rahmen unten: 20px, durchgehend grün;
Rahmen links: 20px, durchgehend grün;
links: 0;
-webkit-animation: circleProgressLoad_left 5s linear unendlich;
}
@-webkit-keyframes circleProgressLoad_right{
0 %{
Rahmen oben: 20px durchgezogen #ED1A1A;
Rahmen rechts: 20px durchgezogen #ED1A1A;
-webkit-transform: drehen(45 Grad);
}
50 %{
Rahmen oben: 20px durchgehend rgb(232, 232, 12);
Rahmen rechts: 20px durchgezogenes RGB (232, 232, 12);
Rahmen links: 20px durchgezogenes RGB (81, 197, 81);
Rahmen unten: 20px durchgezogener RGB (81, 197, 81);
-webkit-transform: drehen(225 Grad);
}
100 %{
Rahmen links: 20px, durchgehend grün;
Rahmen unten: 20px, durchgehend grün;
-webkit-transform: drehen(225 Grad);
}
}
@-webkit-keyframes circleProgressLoad_left{
0 %{
Rahmen unten: 20px durchgezogen #ED1A1A;
Rahmen links: 20px durchgezogen #ED1A1A;
-webkit-transform: drehen(45 Grad);
}
50 %{
Rahmen unten: 20px durchgezogener RGB (232, 232, 12);
Rahmen links: 20px durchgezogenes RGB (232, 232, 12);
Rahmen oben: 20px durchgezogener RGB (81, 197, 81);
Rahmen rechts: 20px durchgezogenes RGB (81, 197, 81);
-webkit-transform: drehen(45 Grad);
}
100 %{
Rahmen oben: 20px, durchgehend grün;
Rahmen rechts: 20px, durchgehend grün;
Rahmen unten: 20px, durchgehend grün;
Rahmen links: 20px, durchgehend grün;
-webkit-transform: drehen(225 Grad);
}
}Wie Sie sehen, handelt es sich lediglich um Animationen, die die Farben verschiedener Ränder ändern. Sie können es selbst üben! Die Hauptmethode besteht darin, zwei Rechtecke zu verwenden, um einen solchen kreisförmigen Fortschrittsbalkeneffekt zu erzielen. Achten Sie besonders auf die Überlaufregel, die eine Schlüsselrolle spielt.
Oben sind die Einzelheiten eines Beispiels für die Verwendung von CSS3 zur Erstellung einer kreisförmigen, scrollenden Fortschrittsbalkenanimation aufgeführt. Weitere Informationen zur Erstellung von Fortschrittsbalken mit CSS3 finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM! |
<<: Ein Artikel zum Verständnis der MySQL Master-Slave-Replikation und der Lese-/Schreibtrennung
>>: Detaillierte Schritte zur Installation von JDK und Tomcat in einer Linux-Umgebung
Artikel empfehlen
Detaillierte Erläuterung der ersten Erfahrungen mit Vue3.0 + TypeScript + Vite
Inhaltsverzeichnis Projekterstellung Projektstruk...
Teilen Sie das Problem, dass Ubuntu 19 die Docker-Quelle nicht installieren kann
Entsprechend den wichtigsten Websites und persönl...
Beheben Sie den 1251-Fehler beim Herstellen einer Verbindung zwischen MySQL und Navicat
Ich habe den Computer neu installiert und die neu...
Erste Schritte mit MySQL Sharding
Vorwort Relationale Datenbanken werden eher zu Sy...
So konfigurieren Sie Nginx zur Unterstützung von IPv6 unter Linux
1. Überprüfen Sie, ob das vorhandene Nginx IPv6 u...
Empfehlen Sie eine coole interaktive Website, die von einem Front-End-Ingenieur erstellt wurde
Website-Link: http://strml.net/ Von Samuel Reed T...
JavaScript zur Nachahmung der Registrierungs- und Anmeldefunktion der offiziellen Xiaomi-Website
Inhaltsverzeichnis Zuerst müssen wir das Seitenla...
HTML+CSS zur Realisierung einer einfachen Navigationsleistenfunktion
Ohne weitere Umschweife komme ich gleich zum Code...
Uniapp implementiert Beispielcode für die Anmeldung mit DingTalk-Scancode
Da Uniapp nicht über eine autorisierte DingTalk-A...
Erläuterung der Methode zum Schreiben von SQL-Anweisungen zum Einfügen
Methode 1: INSERT INTO t1(Feld1,Feld2) VALUE(v001...
Über die richtige Art und Weise der Zeitumrechnung in JS beim Excel-Import
Inhaltsverzeichnis 1. Grundlagen 2. Problembeschr...
Eine kurze Diskussion über die Definition und Vorsichtsmaßnahmen von H-Tags
Den Ergebnissen zufolge gibt es für die Definitio...
Remotedesktopverbindung zwischen Windows und Linux
Wenn es um eine Remotedesktopverbindung zu Linux ...
HTML als Startseite festlegen und zu Favoriten hinzufügen_Powernode Java Academy
So implementieren Sie die Funktionen „Als Startse...
Vorgehensweise bei der Verwendung der MySQL-Systemdatenbank zur Diagnose der Leistungsbelastung
Ein Meister sagte einmal, man müsse die Datenbank...