Share
Obwohl HTML5 Canvas und SVG möglicherweise elegantere Lösungen für das Erstellen von Diagrammen darstellen, lernen wir in diesem Lernprogramm, wie Sie unser eigenes Donut-Diagramm mit nichts anderem als CSS erstellen.
Sehen Sie sich die eingebettete CodePen-Demo unten an, um eine Vorstellung davon zu erhalten, was wir erstellen werden:
Wir beginnen mit einem sehr einfachen Markup. eine einfache ungeordnete Liste mit einem Spanne Element in jedem der Listenelemente:
Wenn das Markup fertig ist, wenden wir zunächst einige grundlegende Stile auf die ungeordnete Liste an:
.Chartfertigkeiten Position: relativ; Breite: 350px; Höhe: 175px;
Dann geben wir jedem einen ::nach dem und ein ::Vor Pseudo-Element und stylen sie:
.Chart-Skills :: vorher, .Chart-Skills :: nach Position: absolut; .chart-skills :: before content: "; width: vererben; height: vererben; border: 45px solid rgba (211,211,211, .3); border-bottom: none; border-top-left-radius: 175px; border -top-right-radius: 175px; .chart-skills :: after content: 'Top Skills'; links: 50%; unten: 10px; transform: translateX (-50%); Schriftgröße: 1.1rem; Schriftgewicht: Fett, Farbe: Cadetblue;
Achten Sie auf die Stile für die ::Vor Pseudoelement. Das gibt uns unseren Halbkreis.
PseudoelementeDie vorgenannten Regeln geben uns bisher folgendes Ergebnis:
Lassen Sie uns nun die Gestaltung der Listenelemente besprechen.
In Bezug auf die Position der Listenelemente führen wir Folgendes aus:
Darüber hinaus sind hier einige Dinge zu beachten:
Accentsconagua
z-index Eigentum.Ursprung verwandeln Eigenschaftswert (d. h. Transformationsursprung: 50% 50%) der Listenelemente. Konkret setzen wir Transformationsursprung: 50% 0. Auf diese Weise wird, wenn wir die Objekte animieren (drehen), ihre mittlere obere Ecke zum Rotationszentrum.Hier sind die zugehörigen CSS-Stile:
.Chart-Fähigkeiten li Position: absolut; Top 100%; links: 0; Breite: erben; Höhe: erben; Rand: 45px fest; Rand oben: keine; Rand unten links Radius: 175px; Rand unten rechts Radius: 175px; Transformationsursprung: 50% 0; .chart-skills li: nth-child (1) z-index: 4; Randfarbe: grün; .chart-skills li: nth-child (2) z-index: 3; Randfarbe: Schamotte; .chart-skills li: nth-child (3) z-index: 2; Randfarbe: Stahlblau; .chart-skills li: nth-child (4) z-index: 1; Randfarbe: Orange;
Sehen Sie sich an, was wir in der nächsten Visualisierung bisher aufgebaut haben:
Spannweiten und ListenelementeDerzeit ist das einzige Listenelement, das sichtbar ist, das grüne z-Index: 4;) die anderen sind darunter.
Bevor wir uns mit den Schritten für die Animation unserer Listenelemente befassen, notieren wir uns den gewünschten Prozentsatz für jedes Element (dh, wie viel Donut jeder bedeckt). Betrachten Sie die folgende Tabelle:
| Sprache | Prozentsatz |
|---|---|
| CSS | 12 |
| HTML | 32 |
| PHP | 34 |
| Python | 22 |
Als Nächstes berechnen wir, um wie viel Grad wir die einzelnen Elemente animieren (drehen) müssen. Um die genaue Gradzahl für jedes Element herauszufinden, multiplizieren wir den Prozentsatz mit 180 ° (nicht mit 360 °, da wir ein. Verwenden) Halbkreis Donut-Chart):
| Sprache | Prozentsatz | Anzahl der Grade |
|---|---|---|
| CSS | 12 | 12/100 * 180 = 21,6 |
| HTML | 32 | 32/100 * 180 = 57,6 |
| PHP | 34 | 34/100 * 180 = 61,2 |
| Python | 22 | 22/100 * 180 = 39,6 |
An dieser Stelle können wir die Animationen einrichten. Zunächst definieren wir einige Animationsstile, die von allen Elementen gemeinsam genutzt werden, indem wir einige Regeln hinzufügen .Chart-Fähigkeiten li:
Animations-Füllmodus: vorwärts; Animationsdauer: .4s; Animations-Timing-Funktion: linear;
Dann definieren wir die einzigartigen Animationsstile:
.Diagramm-Fähigkeiten li: n-te Kind (1) z-index: 4; Randfarbe: grün; Animationsname: Dreh-Eins; .chart-skills li: nth-child (2) z-index: 3; Randfarbe: Schamotte; Animationsname: Drehen Sie zwei; Animationsverzögerung: .4s; .chart-skills li: nth-child (3) z-index: 2; Randfarbe: Stahlblau; Animationsname: Drehe-Drei; Animationsverzögerung: .8s; .chart-skills li: nth-child (4) z-index: 1; Randfarbe: Orange; Animationsname: Drehen Sie vier; Animationsverzögerung: 1,2s;
Beachten Sie, dass wir allen Artikeln außer dem ersten eine Verzögerung hinzufügen. Auf diese Weise erstellen wir schöne sequentielle Animationen. Wenn zum Beispiel die Animation des ersten Elements abgeschlossen ist, wird das zweite Element usw. angezeigt.
Der nächste Schritt besteht darin, die tatsächlichen Animationen anzugeben:
@keyframes drehen um Eins 100% transform: drehen (21,6 Grad); / ** * 12% => 21.6deg * / @keyframes drehen-zwei 0% transform: rotate (21.6deg); 100% umwandeln: drehen (79,2 Grad); / ** * 32% => 57,6 Grad * 57,6 + 21,6 => 79,2 Grad * / @keyframes drehen-drei 0% transform: drehen (79,2 Grad); 100% umwandeln: drehen (140,4 Grad); / ** * 34% => 61,2 Grad * 61,2 + 79,2 => 140,4 Grad * / @keyframes drehen-vier 0% transform: drehen (140,4 Grad); 100% umwandeln: drehen (180 Grad); / ** * 22% => 39,6 Grad * 140,4 + 39,6 => 180 Grad * /
Bevor wir fortfahren, schauen wir uns kurz an, wie die Animationen funktionieren:
Das erste Element geht aus verwandeln: keine zu umwandeln: drehen (21,6deg).
Das zweite Element geht von aus umwandeln: drehen (21,6deg) (beginnt an der Endposition des ersten Elements) bis verwandeln: drehen (79,2 Grad) (57,6 Grad + 21,6 Grad).
Das dritte Element geht aus verwandeln: drehen (79,2 Grad) (beginnt an der Endposition des zweiten Elements) bis umwandeln: drehen (140,4 Grad) (61,2 Grad + 79,2 Grad).
Das vierte Element geht von aus umwandeln: drehen (140,4 Grad) (beginnt an der Endposition des dritten Elements) bis verwandeln: drehen (180 Grad) (140,4 Grad + 39,6 Grad).
Um die untere Hälfte des Diagramms auszublenden, müssen wir die folgenden Regeln hinzufügen:
.Chart-Skills / * bestehende Regeln… * / Überlauf: ausgeblendet; .chart-skills li / * bestehende Regeln… * / transform-style: preserve-3d; Sicht nach hinten: versteckt;
Das Überlauf versteckt Der Eigenschaftswert stellt sicher, dass nur der erste Halbkreis (der mit ::Vor Pseudoelement) ist sichtbar. Sie können diese Eigenschaft auch entfernen, wenn Sie die Anfangsposition der Listenelemente testen möchten.
Das transform-style: preserve-3d und Sicht nach hinten: versteckt Eigenschaften verhindern flackernde Effekte, die in verschiedenen Browsern aufgrund von Animationen auftreten können. Wenn dieses Problem weiterhin in Ihrem Browser auftritt, können Sie auch diese Lösungen ausprobieren.
Die Karte ist fast fertig! Jetzt müssen Sie nur noch die Diagrammbeschriftungen formatieren, was wir im nächsten Abschnitt tun werden.
Hier ist die CodePen-Demo, die das aktuelle Aussehen unserer Grafik zeigt:
In diesem Abschnitt formatieren wir die Diagrammbeschriftungen.
In Bezug auf ihre Position machen wir Folgendes:
Position: absolut und benutze die oben und links Eigenschaften, um ihre gewünschte Position festzulegen.verwandeln: drehen (79,2 Grad), und damit wird das zugehörige Label haben umwandeln: drehen (-79,2 Grad).Im Folgenden sind die entsprechenden CSS-Stile aufgeführt:
.Chart-Skills-Spanne Position: absolut; Schriftgröße: .85rem; .chart-skills li: nth-child (1) span top: 5px; links: 10px; umwandeln: drehen (-21,6 Grad); .chart-skills li: nth-child (2) span top: 20px; links: 10px; umwandeln: drehen (-79,2 Grad); .chart-skills li: nth-child (3) span top: 18px; links: 10px; umwandeln: drehen (-140,4 Grad); .chart-skills li: nth-child (4) span top: 10px; links: 10px; transform: drehen (-180deg);
Nun, da wir die Etiketten positioniert haben, ist es Zeit, sie zu animieren. Zwei Dinge sind hier erwähnenswert:
Animationsverzögerung Eigenschaft, um sequentielle Animationen zu erstellen. Außerdem fügen wir das hinzu Sicht nach hinten: versteckt Eigenschaftswert, um sicherzustellen, dass durch Animationen keine flackernden Effekte auftreten.Die CSS-Regeln, die sich mit der Animation der Diagrammbeschriftungen befassen, sind unten aufgeführt:
.Chart-Fähigkeiten (Rücksichtbarkeit): versteckt; Animation: Einblenden .4s linear vorwärts; .chart-skills li: nth-child (2) Span Animationsverzögerung: .4s; .chart-skills li: nth-child (3) Span Animationsverzögerung: .8s; .chart-skills li: nth-child (4) Spannweite Animationsverzögerung: 1,2 s; @keyframes-Einblenden 0%, 90% Deckkraft: 0; 100% Deckkraft: 1;
Hier ist das letzte Diagramm:
Im Allgemeinen funktioniert die Demo in allen Browsern gut. Ich möchte nur zwei kleine Probleme besprechen, die sich auf das Internet beziehen Grenzradius Eigentum.
Erstens, wenn wir unseren Artikeln unterschiedliche Farben geben würden, könnte das Diagramm ungefähr so aussehen:
Beachten Sie zum Beispiel die oberen und unteren Ecken des dritten Elements. Es gibt zwei rote Linien, die aus der Randfarbe des vierten Elements stammen. Wir können diese Zeilen sehen, weil das vierte Element im Vergleich zum dritten Element eine dunklere Randfarbe hat. Obwohl dies ein kleines Problem ist, sollten Sie sich dessen bewusst sein, um geeignete Farben für Ihre eigenen Diagramme auszuwählen.
Zweitens sieht das Diagramm in Safari folgendermaßen aus:
Schauen Sie sich die kleinen Lücken an, die im zweiten und dritten Element auftauchen. Wenn Sie etwas zu diesem Problem wissen, teilen Sie uns dies in den Kommentaren mit!
In diesem Lernprogramm haben wir die Erstellung eines Halbkreis-Donut-Diagramms mit reinem CSS durchlaufen. Wie bereits in der Einleitung erwähnt, gibt es potenziell leistungsfähigere Lösungen (z. B. HTML5 Canvas und SVG), um diese Art von Dingen zu erstellen. Wenn Sie jedoch etwas Einfacheres und Leichtes bauen und eine Herausforderung annehmen möchten, ist CSS der richtige Weg!
