So erstellen Sie ein Kreisdiagramm mit CSS

Vorwort:

Bei der Arbeit benötigen wir manchmal Kreisdiagramme wie statistische Diagramme, Fortschrittsanzeigen, Timer usw. Natürlich gibt es viele Möglichkeiten, sie umzusetzen, und es gibt sogar fertige js-Bibliotheken direkt verfügbar. Aus Interesse habe ich reines CSS verwendet, um das Kreisdiagramm selbst zu implementieren und zu sehen, wie es funktioniert.

(Empfohlenes Video-Tutorial: css-Video-Tutorial)

<div class="pie"></div>

.pie {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: yellowgreen;
    background-image: linear-gradient(to right, transparent 50%, #655 0);
}

.pie::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0/50%;
    background-color: inherit;
    transform-origin: left;
    transform: rotate(.2turn);
}

Effekt:

Durch Ändern des Drehwinkels können Kreisdiagrammeffekte unterschiedlicher Größe erzielt werden, aber Leser, die es selbst ausprobiert haben, werden feststellen, dass das Drehen vorbei ist 50 % Das Obige stellt nicht den idealen Effekt dar, sondern den folgenden Effekt:

Um dieses Problem zu lösen, ändern Sie die Hintergrundfarbe des Pseudoelements, wenn der Bereich, der angezeigt werden muss, mehr als die Hälfte beträgt. Das Ändern der Hintergrundfarbe ist in Ordnung.

Der Autor unten zeigt ein einfaches Beispiel für einen Fortschrittsindikator. Wenn Leser es mit ihren eigenen Händen versuchen, werden sie einen sich ständig ändernden Kreisdiagrammeffekt feststellen.

.pie {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: yellowgreen;
    background-image: linear-gradient(to right, transparent 50%, #655 0);
}

.pie::before {
    content: '';
    display: block;
    margin-left: 50%;
    height: 100%;
    border-radius: 0 100% 100% 0/50%;
    background-color: inherit;
    transform-origin: left;
    animation: spin 3s linear infinite,bg 6s step-end infinite;
}
@keyframes spin{
    to{transform: rotate(.5turn);}
}
@keyframes bg{
    50%{background: #655;}
}

Der Effekt ist wie folgt:

Es ist am besten, wenn der Leser mit seinen eigenen Händen experimentiert, versucht, die Eigenschaften zu ändern und die Bedeutung zu verstehen. Nur durch Verständnis können wir interessantere Dinge schaffen. Wenn Leser an SVG interessiert sind, können sie versuchen, SVG zur Implementierung von Kreisdiagrammen zu verwenden. Der mit SVG erzielte Effekt ist bunter.

Empfohlenes Tutorial: CSS-Tutorial

Das obige ist der detaillierte Inhalt vonSo erstellen Sie ein Kreisdiagramm mit CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!