前面我們已經做到了 0-50%的效果 ，50-100%的效果似乎沒辦法來做 ，這個是我們上一篇分享做出來的效果：
這個時候我們是可以吧50%-100% 單獨拿出了考慮的，安裝之前的思路 你做到50%-100% 的餅圖效果，他顯示的卻是50%-0%的效果，那么我們反過來呢 ？一個棕色的偽元素，旋轉從0-50%。所有60% ，覆蓋層的偽元素應該是給他的一個棕色的背景色：
.pie::before?{
content:?'';
display:?block;
margin-left:?50%;
height:?100%;
border-radius:?0?100%?100%?0?/?50%;
background:?#655;
transform-origin:?left;
transform:?rotate(.1turn);}
現在思路以及基本出來了，可以描述任何百分比的方法。更好的我們可用css創建一個0-100% 的動畫。
@keyframes?spin?{
to?{?transform:?rotate(.5turn);?}
}
@keyframes?bg?{
50%?{?background:?#655;?}
}
.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;
}
為了直觀的顯示效果 我加了一個 border 邊框 ，下面的動態圖可以詳細的反應他的流程：
今天的分享就到這里吧，大家學習有難度嗎？ 想學習更多 或者有點難度 可以加入我們的學習群 497187010 一起交流學習 哦！完美的 做法 我們下一篇繼續講，大家可以先嘗試做做一下吧。同時也可以用svg 等 來做 ，嘗試一下吧！css寫完了嗎？沒有哦 明天來看一下后續還有什么吧
?
