第手把手教你使用CSS制作動(dòng)態(tài)餅圖（附代碼）餅圖是常見(jiàn)的組件，可讓你顯示整體的各個(gè)部分，你可以將它們用于許多不同的場(chǎng)景。你會(huì)發(fā)現(xiàn)很多關(guān)于構(gòu)建這樣一個(gè)組件的文章，但它們通常要么依賴于SVG，要么依賴于大量的HTML元素。在這篇文章中，我將向你展示如何使用CSS和僅一個(gè)元素創(chuàng)建一個(gè)餅圖。

接下來(lái)我們制作一個(gè)靜態(tài)餅圖，一個(gè)動(dòng)畫餅圖，我們也可以有圓角。然而所有這一切都只有一個(gè)div元素。

除此之外，我們可以使用CSS變量輕松調(diào)整不同的值，因此我們不必為更改CSS代碼而煩惱。

餅圖的HTML結(jié)構(gòu)

正如我上面提到的，我們有一個(gè)單一的div，我們添加百分比值（餅圖的進(jìn)度）作為主要內(nèi)容：

div>

我們還將CSS變量添加為內(nèi)聯(lián)樣式。

--p：這個(gè)變量應(yīng)該包含百分比值作為一個(gè)數(shù)字（不帶%符號(hào)）。它應(yīng)該與內(nèi)容相同。

--b：這個(gè)變量將定義邊框的粗細(xì)。

--c：這個(gè)變量將定義主要顏色。

為了本文和演示，我使用單字符變量來(lái)保持代碼簡(jiǎn)短。但在生產(chǎn)環(huán)境中使用代碼時(shí)，最好考慮更明確的變量。示例：--percentage、--border-thickness和--mAIn-color。

餅圖的CSS設(shè)置

我們首先從樣式化我們的內(nèi)容開(kāi)始。這部分很簡(jiǎn)單，代碼如下：

.pie{

--w:150px;

width:var(--w);

aspect-ratio:1;

display:inline-grid;

place-content:center;

margin:5px;

font-size:25px;

font-weight:bold;

font-family:sans-serif;

}

我將元素定義為inline-grid使用place-content:center.我們aspect-ratio:1用來(lái)確保元素保持方形。我們也可以使用height:var(--w)，但學(xué)習(xí)和使用新的CSS屬性總是好的。

你可能想知道為什么我使用變量來(lái)定義寬度而不是簡(jiǎn)單地設(shè)置width:150px.我需要知道寬度的值以備將來(lái)使用，因此我將其定義為變量。

剩下的所有CSS都是非?；镜奈谋緲邮?。隨意更新它。

讓我們繼續(xù)討論有趣的部分我們組件的主要形狀。為此，我們將使用具有以下樣式的偽元素：

.pie:before{

content:

position:absolute;

border-radius:50%;

inset:0;

background:conic-gradient(var(--c)calc(var(--p)*1%),#00000);

}

一個(gè)覆蓋所有區(qū)域的偽元素，position:absolute這要?dú)w功于inset:0.是的，它又是一個(gè)新的CSS屬性，它是top,right,bottom,and的簡(jiǎn)寫right。

您可以在此處閱讀更多信息

/en-US/docs/Web/CSS/inset

然后我們把它變成一個(gè)圓圈(border-radius:50%)并應(yīng)用一個(gè)conic-gradient().請(qǐng)注意我們定義為內(nèi)聯(lián)樣式的CSS變量的使用（--c用于顏色和--p百分比）。

到目前為止，這將為我們提供以下結(jié)果：

我們?cè)絹?lái)越近了！這conic-gradient()是給我們一個(gè)雙色漸變。從0%到p%主色，其余部分為透明色（用十六進(jìn)制值定義#0000）。

為了只保留邊框部分，我們將使用amask來(lái)隱藏中間部分。這次我們將使用radial-gradient()：

radial-gradient(farthest-side,redcalc(99%-var(--b)),bluecalc(100%-var(--b)))

以上作為背景應(yīng)用將為我們提供以下信息：

注意定義邊框粗細(xì)的變量的使用--b（在上面顯示為藍(lán)色）。

現(xiàn)在想象紅色部分是不可見(jiàn)部分，藍(lán)色部分是可見(jiàn)部分。如果我們對(duì)屬性使用相同的漸變，這就是我們將得到的mask：

我們的餅圖包含一個(gè)元素和幾行CSS代碼。

.pie{

--w:150px;

width:var(--w);

aspect-ratio:1;

position:relative;

display:inline-grid;

place-content:center;

margin:5px;

font-size:25px;

font-weight:bold;

font-family:sans-serif;

.pie:before{

content:

position:absolute;

border-radius:50%;

inset:0;

background:conic-gradient(var(--c)calc(var(--p)*1%),#00000);

-webkit-mask:radial-gradient(farthest-side,#0000calc(99%-var(--b)),#000calc(100%-var(--b)));

mask:radial-gradient(farthest-side,#0000calc(99%-var(--b)),#000calc(100%-var(--b)));

}

和HTML：

div>

如何添加圓角邊緣

為此，我將添加一個(gè)額外的漸變層來(lái)圓頂邊緣，并添加一個(gè)偽元素來(lái)圓另一個(gè)邊緣。這是一個(gè)理解技巧的插圖：

(1)圓頂邊緣的代碼：

.pie:before{

background:

radial-gradient(farthest-side,var(--c)98%,#0000)top/var(--b)var(--b)no-repeat,

conic-gradient(var(--c)calc(var(--p)*1%),#00000);

}

除了，conic-gradient()我們還添加了一個(gè)radial-gradient()放置在頂部的，其大小等于由定義的邊框厚度--b。(2)將另一邊倒圓的代碼：

.pie:after{

content:

position:absolute;

border-radius:50%;

inset:calc(50%-var(--b)/2);

background:var(--c);

transform:rotate(calc(var(--p)*3.6deg))translate(calc(50%-var(--w)/2));

}

該inset屬性將偽元素的大小設(shè)置為等于--b。請(qǐng)記住，它是top,right和bottom的簡(jiǎn)寫left。如果我們有

left=right=50%-b/2

這意味著我們從每一邊移動(dòng)到中心減去等于的偏移量b/2-所以我們最終的寬度等于2*b/2=b。高度的邏輯相同。

現(xiàn)在我們需要正確放置我們的元素，這就是我們使用transform屬性的原因。我們的元素最初放置在中心，所以我們需要先旋轉(zhuǎn)它。有了百分比，我們使用三規(guī)則來(lái)獲得角度：

angle=percentage*360deg/100

然后我們進(jìn)行平移，這里我們需要寬度，因?yàn)槲覀儽仨殘?zhí)行一半寬度的平移(w/2)。

好吧，好吧你可能對(duì)所有這些公式有點(diǎn)迷失了。在下面找到一個(gè)插圖以了解轉(zhuǎn)換屬性背后的邏輯

之后，我們用主色給偽元素上色--c，就完成了。我們有圓邊的餅圖。

如何為餅圖制作動(dòng)畫

靜態(tài)餅圖很好，但動(dòng)畫餅圖更好！為此，我們將動(dòng)畫百分比值--p從0定義值。默認(rèn)情況下，我們無(wú)法為CSS變量設(shè)置動(dòng)畫，但由于有了新@property功能，它現(xiàn)在可以實(shí)現(xiàn)了。

我們注冊(cè)變量：

@property--p{

syntax:number

inherits:true;

initial-value:0;

}

我們創(chuàng)建一個(gè)keyframes：

@keyframesp{

from{--p:0}

}

請(qǐng)注意，我們只需要指定from.這樣做，默認(rèn)情