僅使用一個(gè)div配合css實(shí)現(xiàn)餅狀圖的方法

本篇內(nèi)容主要講解“僅使用一個(gè)div配合css實(shí)現(xiàn)餅狀圖的方法”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“僅使用一個(gè)div配合css實(shí)現(xiàn)餅狀圖的方法”吧!

完整的代碼請(qǐng)滑到文末。

我們只使用一個(gè)div，僅采用css實(shí)現(xiàn)餅狀圖。

HTMl 結(jié)構(gòu)

<div class="pie" style="--p:60;--b:10px;--c:purple;">60%</div>

我們添加了幾個(gè) css 的變量：

• --p：進(jìn)度條的百分比（純數(shù)字，不帶%），餅狀圖值和 div 內(nèi)容（帶%）一致。

• --b：邊框厚度的值

• --c：邊框的主體顏色

本文使用的是簡(jiǎn)寫的變量，在生產(chǎn)環(huán)境中，為了達(dá)到可讀性，我們應(yīng)該使用--p -> --percentage， --b -> --border-thickness， --c -> --main-color 來(lái)表示。

Pie 的基本設(shè)置

我們?yōu)轱灎顖D設(shè)定基本的樣式。

.pie {
  --w: 150px; // --w -> --width
  width: var(--w);
  aspect-ratio: 1; // 縱橫比，1 說(shuō)明是正方形
  display: inline-grid;
  place-content: center;
  margin: 5px;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}

上面我們使用了 aspect-ratio: 1; 保證 div 是正方形，當(dāng)然你也可以使用 height: var(--w) 達(dá)到效果。

接下來(lái)，我們使用偽元素實(shí)現(xiàn)簡(jiǎn)單的餅狀圖：

.pie:before {
  content: "",
  position: absoute;
  border-radius: 50%;
  inset: 0; // 知識(shí)點(diǎn) 1
  background: conic-gradient(var(--c) calc(var(--p)*1%),#0000 0); // 知識(shí)點(diǎn) 2
}

知識(shí)點(diǎn)1: inset: 0; 相當(dāng)于 top: 0; right: 0; bottom: 0; top: 0;

知識(shí)點(diǎn)2: conic-gradient 圓錐漸變，css 方法, 更多內(nèi)容， 這里的 #0000 是 transparent 的十六進(jìn)制。

#0000 Hex Color · Red (0%) · Green (0%) · Blue (0%).

conic-gradient應(yīng)用之后：

為了使得僅是邊框的區(qū)域被看到，我們使用 mask 屬性去隱藏中間圓的部分。我們將使用 radial-gradient() 方法：

radial-gradient(farthest-side,red calc(99% - var(--b)),blue calc(100% - var(--b)))

上面代碼應(yīng)用后，可得到效果圖如下：

我們的目標(biāo)如下圖：

我們更改下代碼即可實(shí)現(xiàn)：

<div class="pie" style="--p:60;--b:10px;--c:purple;">60%</div>

.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%),#0000 0);
  -webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}

添加圓形邊緣

如何添加圓形邊緣呢，看了下面插圖，你就明白這個(gè)小技巧。

針對(duì)圖上的效果(1)，是將圓形放在開(kāi)始的邊緣。

.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%), #0000 0);
}

針對(duì)圖上的效果(2)，是將圓形放在結(jié)束的邊緣。

.pipe: after {
  content: "";
  position: absolute;
  border-radius: 50%;
  inset: calc(50% - var(--b)/2); // 知識(shí)點(diǎn)1
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2)); // 知識(shí)點(diǎn)2
}

知識(shí)點(diǎn)1： 的 inset: 0; 上面我們也提到 -- 它是 left: 0; right: 0; bottom: 0; top: 0; 的簡(jiǎn)寫。

這里我們有：

left = right = 50% - b/2

這里我們將元素往左和右移動(dòng)了50% - b/2，也就等于元素寬度為 b, 且左右居中。針對(duì)高度，同理。

知識(shí)點(diǎn)2： 的旋轉(zhuǎn)度數(shù)計(jì)算 --

angle = percentage * 360deg / 100

先將元素旋轉(zhuǎn)了相應(yīng)的度數(shù)，之后對(duì)其位置進(jìn)行移動(dòng)，這里涉及到了對(duì) Y 軸居中?？次淖忠苍S有些難懂，結(jié)合下面的插圖理解下：

添加動(dòng)畫

到現(xiàn)在為止，我們實(shí)現(xiàn)的是一個(gè)靜止的餅狀圖。我們接下來(lái)為它加上動(dòng)效。

先注冊(cè)變量：

@property --p {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

接著，我們創(chuàng)建關(guān)鍵幀：

@keyframes p {
  from {
    --p: 0
  }
}

注意：這里我們只需要設(shè)置 from 的 --p 值即可。瀏覽器會(huì)自動(dòng)匹配我們預(yù)設(shè) to 中的值（div class="pie" style="--p:60;">60%</div>）

最后，我們調(diào)用動(dòng)畫。

animation: p 1s .5s both;

嘿嘿～ 復(fù)制下面的代碼體驗(yàn)一下吧。當(dāng)然，我們也提供了圖。

代碼和效果圖

<div class="pie" style="--p:20"> 20%</div>
<div class="pie" style="--p:40;--c:darkblue;--b:10px"> 40%</div>
<div class="pie no-round" style="--p:60;--c:purple;--b:15px"> 60%</div>
<div class="pie animate no-round" style="--p:80;--c:orange;"> 80%</div>
<div class="pie animate" style="--p:90;--c:lightgreen"> 90%</div>

@property --p{
  syntax: '<number>';
  inherits: true;
  initial-value: 1;
}
.pie {
  --p:20;
  --b:22px;
  --c:darkred;
  --w:150px;
  width: var(--w);
  aspect-ratio: 1;
  position: relative;
  display: inline-grid;
  margin: 5px;
  place-content: center;
  font-size: 25px;
  font-weight: bold;
  font-family: sans-serif;
}
.pie:before,
.pie:after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.pie:before {
  inset: 0;
  background:
    radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
    conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
  -webkit-mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
          mask: radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
  inset: calc(50% - var(--b)/2);
  background: var(--c);
  transform: rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.animate {
  animation: p 1s .5s both;
}
.no-round:before {
  background-size: 0 0, auto;
}
.no-round:after {
  content: none;
}
@keyframes p{
  from{--p:0}
}

效果圖：

到此，相信大家對(duì)“僅使用一個(gè)div配合css實(shí)現(xiàn)餅狀圖的方法”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！