我們經(jīng)常在網(wǎng)站或應(yīng)用程序中使用餅狀圖來(lái)呈現(xiàn)數(shù)據(jù)，但是如何讓它們更加生動(dòng)有趣呢？使用CSS餅狀圖旋轉(zhuǎn)動(dòng)畫(huà)可以讓你的數(shù)據(jù)更加生動(dòng)，讓用戶更易于理解和記憶。

首先，讓我們看一下一個(gè)簡(jiǎn)單的餅狀圖：

<div class="pie">
<div class="slice" style="transform: rotate(30deg);"></div>
<div class="slice" style="transform: rotate(60deg);"></div>
<div class="slice" style="transform: rotate(90deg);"></div>
<div class="slice" style="transform: rotate(120deg);"></div>
<div class="slice" style="transform: rotate(180deg);"></div>
<div class="slice" style="transform: rotate(270deg);"></div>
</div>

上面的代碼會(huì)呈現(xiàn)一個(gè)餅狀圖，由6個(gè)等大的扇形組成。

為了讓餅狀圖是動(dòng)畫(huà)效果，我們需要使用CSS3的動(dòng)畫(huà)屬性。首先我們需要定義一個(gè)keyframes，讓這個(gè)keyframes包含從0%到100%的旋轉(zhuǎn)動(dòng)畫(huà)：

@keyframes pie-rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}

接下來(lái)，在我們的餅狀圖的div中引入這個(gè)動(dòng)畫(huà)：

.pie {
animation: pie-rotate 2s linear infinite;
}

現(xiàn)在我們的餅狀圖將旋轉(zhuǎn)2秒鐘，永遠(yuǎn)重復(fù)滾動(dòng)，讓我們看看動(dòng)畫(huà)效果吧！