CSS-Beispielcode zum Erzielen eines kreisförmigen Fortschrittsbalkeneffekts mit Farbverlauf

Umsetzungsideen

• Ganz außen ist ein großer Kreis (Farbverlauf)
• Zeichnen Sie zwei Halbkreise hinein, um den Verlaufskreis abzudecken (um es deutlicher zu machen, sind die Farben der linken und rechten Seite unterschiedlich und auf Graublau eingestellt).
• Drehen Sie den blauen Halbkreis rechts im Uhrzeigersinn, und der darunterliegende Farbverlaufskreis wird angezeigt. Drehen Sie ihn beispielsweise um 45 Grad (45/360 = 12,5 %) und stellen Sie dann den blauen rechten Halbkreis auf Grau ein. Ein Kreisdiagramm mit 12,5 Kreisen wird gezeichnet.
• Versuchen Sie, einen größeren Grad zu drehen. Nach einer Drehung um 180 Grad überlappt sich der rechte Halbkreis. Wenn Sie ihn weiter drehen, scheint der Grad immer kleiner zu werden, was unseren Anforderungen nicht entspricht. Wir sollten den Kreis auf der rechten Seite an seine ursprüngliche Position zurückbringen, seine Hintergrundfarbe auf die gleiche wie die Grundfarbe einstellen und den Halbkreis auf der linken Seite im Uhrzeigersinn drehen.
• Fügen Sie abschließend in der Mitte einen kleinen weißen Kreis hinzu, um den Prozentsatz anzuzeigen.

Wie in der Abbildung gezeigt:

Bemerkenswerte Eigenschaften:

• background-image wird verwendet, um ein oder mehrere Hintergrundbilder für ein Element festzulegen. Farbverläufe können durch linearen Farbverlauf erreicht werden.
• Clip, definiert, welcher Teil eines Elements sichtbar ist. Die Clip-Eigenschaft gilt nur für Elemente mit der Position: absolut.

Der folgende Code zeichnet einen 33%-Kreis

<div Klasse="Kreisbalken">
    <div Klasse = "Kreis-Leiste-links" </div>
    <div Klasse = "Kreis-Leiste-rechts"></div>
    <div Klasse="Maske">
        33 %
    </div>
</div>

.Kreisbalken {
    Hintergrundbild: linearer Farbverlauf (#7affaf, #7a88ff);
    Breite: 182px;
    Höhe: 182px;
    Position: relativ;
}
.Kreisbalken-links {
    Hintergrundfarbe: #e9ecef;
    Breite: 182px;
    Höhe: 182px;
    Clip: Rechteck (0, 91px, automatisch, 0);
}
.Kreisbalken-rechts {
    Hintergrundfarbe: #e9ecef;
    Breite: 182px;
    Höhe: 182px;
    Clip: Rechteck (0, automatisch, automatisch, 91px);
    transformieren: drehen (118,8 Grad);
}
.Maske {
    Breite: 140px;
    Höhe: 140px;
    Hintergrundfarbe: #fff;
    Textausrichtung: zentriert;
    Zeilenhöhe: 0,2em;
    Farbe: rgba(0, 0, 0, 0,5);
    Position: absolut;
    links: 21px;
    oben: 21px;
}
.mask > Spanne {
    Anzeige: Block;
    Schriftgröße: 44px;
    Zeilenhöhe: 150px;
}
/*Alle Nachkommen sind horizontal und vertikal zentriert, es handelt sich also um konzentrische Kreise*/
.Kreisbalken * {
    Position: absolut;
    oben: 0;
    rechts: 0;
    unten: 0;
    links: 0;
    Rand: automatisch;
}
/*Sowohl das Element selbst als auch seine Unterelemente sind Kreise*/
.Kreisbalken,
.Kreisbalken > * {
    Randradius: 50 %;
}

Damit ist dieser Artikel über den Beispielcode zur Implementierung eines kreisförmigen Verlaufsbalkeneffekts mit CSS abgeschlossen. Weitere CSS-Verlaufsbalkeninhalte finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!