我們的效果做到以下這樣似乎已經(jīng)完成了，但是一個好的代碼應(yīng)該是可以實用不同的情況，常用的情況肯定是需要滿足的 。一個高質(zhì)量的代碼 應(yīng)該是簡介 、維護性強、可訪問和多次實用。因此需要做一下完善。
首先寫入兩個div 分別為 20% 和 60%
divclass=pie90%/div divclass=pie80%/div
然后，獲得兩個餅圖，一個20%，一個為60%。首先是通過樣式來修改 ；其次，要求代碼的優(yōu)雅、封裝、可維護性，最重要的是可訪問的前提下，我們可以總是寫一段簡短腳本來解析文本內(nèi)容，并添加內(nèi)聯(lián)樣式。
不過有個問題就是 控制餅圖顯示百分比的樣式是寫在 偽元素上 ，和你想的一樣，無法直接為偽元素寫內(nèi)聯(lián)樣式。所以需要看一下有沒有新的方法。
注：你可以在其他情況下使用類似的技術(shù)，使用一個值的范圍（spectrum）而不需要復雜、重復的計算。同時，也可以通過逐步的設(shè)置值來調(diào)試動畫。查看一個更簡單、孤立的技術(shù)實例。
這個看 起來有點困難 也很少這樣使用。現(xiàn)在想之前那樣做的動畫 ，他是可以暫停的，用屬性讓他停留在一個狀態(tài) 。這個技術(shù)是可以用負動畫延遲來靜態(tài)地跳到動畫中的任何一個點，并待在那里 。弄明白了嗎？確實，負動畫延遲不僅僅是規(guī)范允許的，對于以下這些情況也是非常有用的：
一個負的延遲是有效的。就像一個‘0s’的延遲，它意味著動畫立即執(zhí)行，但是是由延遲的絕對值自動進行，就好像動畫已經(jīng)在過去的某個指定的時間開始了，因此它似乎是從中途的活躍時間開始的。
由于動畫暫停所顯示的那一幀（由我們定義的負animation-delay），就是唯一顯示的一幀。餅圖上顯示的百分比就是動畫延遲的總持續(xù)時間的百分比。例如，當前動畫持續(xù)時間為6s，我們設(shè)animation-delay為-1.2s來顯示20%。為了簡化計算，我們加上動畫持續(xù)時間為100s。注意，由于動畫是被永久性暫停，所擴大的時間是不會影響效果的。
還有一個問題：動畫是在偽元素上的，而想要的是.pie元素上設(shè)置內(nèi)聯(lián)樣式。但是，div上面沒有動畫，就需要將動畫的內(nèi)聯(lián)樣式設(shè)置在它（div）元素上，然后在偽元素上設(shè)置animation-delay: inherit;。將它們放在一起，我們對20%和60%的餅圖標記如下：
divclass=pie style=animation-delay:-20s/div divclass=pie style=animation-delay:-60s/div
現(xiàn)在，我們之前為這個動畫寫的CSS代碼就多了 動畫延遲屬性 ，同時他的動畫也有所改變 ：
@keyframesspin{
to{transform:rotate(.5turn);}
}
@keyframesbg{
50%{background:#655;}
}
animation:spin50slinearinfinite,
bg100sstep-endinfinite;
animation-play-state:paused;
animation-delay:inherit;此時，我們可以將標記轉(zhuǎn)換為使用百分比作為內(nèi)容，正如我們最初的目標，并通過簡單的腳本添加動畫延遲的內(nèi)聯(lián)樣式：
document.querySelectorAll('.pie').forEach(function(pie){
varp=parseFloat(pie.textContent);
pie.style.animationDelay='-'+p+'s';
});請注意，為了更好的可用性和可訪問性，我們保留完整的文本。我們的餅圖的樣子如下圖 。我們需要隱藏文本，為保證文本的可訪問性，我們可以設(shè)置文本的color: transparent，這樣是可選擇和可打印的。進一步的美化（polish），可以讓百分比在餅圖內(nèi)居中，這樣用戶選擇它的時候，它就不會在默認的位置上。只要做一下操作：
把餅圖的height改為line-height（或者加一個line-height的CSS屬性，使它等于height，但這是毫無意義的重復的代碼，因為瀏覽器會將height的計算值設(shè)置為line-height的值）。
將偽元素的position設(shè)置為absolute，并且設(shè)置它的size，以使文本不換行，不溢出。
添加text-align: center; 使文本水平居中。
整體的代碼如圖：
今天的分享的有點多，大家學習有難度嗎？ 想學習更多 或者有點難度 可以加入我們的學習群 497187010 一起交流學習 哦！ 做個是基本完成了 ，但是大家別忘了美化 和調(diào)試了，比如兼容性等等 ，只要才是堪稱完美的 ，下一篇將會將svg做法 ?=^^= .。
