5年前端經驗小伙伴教你純css3實現餅狀圖

有一些網頁中,有時候會碰到餅狀圖的需求，比如統計圖表，進度指示器，定時器等，實現方式也是各種各樣，現在也有不少現成的js庫，可以直接拿來使用，方便很多。這里筆者為大家演示一種純css實現餅狀圖效果的方法。

資源網站大全 https://55wd.com

<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);
}

 

 

實現效果如圖所示： 

改變rotate的角度就可以實現不同大小的餅狀圖效果，但是親手試驗的讀者會發現，旋轉50%以上並不能呈現出理想的效果，而是會呈現出如下效果： 

要解決這個問題，改變偽元素的背景色就可以解決，當需要展示的區域大於一半時，改變背景色就OK。 下面筆者展示一個簡單的進度指示器示例，讀者親手試驗的話，會發現一個不斷變化的餅狀圖效果。

.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;}
}

 

 

讀者最好親手試驗，嘗試修改其中的屬性，理解其中的意思，只有理解了才能做出更有趣的東西。如果讀者對svg感興趣的話，可以嘗試使用svg來實現餅狀圖，svg實現的效果要更加豐富多彩些。