純CSS3製作圓形進度條所遇到的問題

標籤：css   orm   enter   部分   移動   寬高   hid   一個   otto   

　　近日在開發的頁面中，需要製作一個動態圓形進度條，首先想到的是利用兩個矩形，寬等於直徑的一半，高等於直徑，兩個矩形利用浮動貼在一起，設定overflow：hidden屬性，作為盒子，內部有一個與其寬高相等的子盒子，左側的子盒子左上方和左下角以及右側子盒子的右上方和右下角利用border-radius：半徑，這樣兩個矩形便組成了一個完整的圓形。

　　我們讓左側的子盒子繞著右邊的中點旋轉180°，這樣左側的半圓就隱藏了，右側半圓同理。這個地方設定旋轉中心是用的transform-origin屬性，第一個值是X軸方向，第二個值是Y軸方向，可以用left，right，top，bottom，center這些詞，也可以用數值，數值的話是以圖形的左上方為原點。

　　然後我們給兩個半圓設定邊框，並且左邊的半圓的右邊框設定為none，右邊半圓的左邊框設定為none。此時一個完整的圓環就設定完畢了，然後通過動畫旋轉半圓，邊框從隱藏地區逐漸進入可視地區，我們看到的效果就是圓形進度條的載入過程。這個方法在PC端沒有太大問題，然而在移動端，由於瀏覽器的渲染等問題，旋轉過程中圓角消失，或是出現較大鋸齒導致邊框部分缺失。

　　這時我們就不用邊框來作進度條，而是給圓形一個背景色，再在上面覆蓋一個半徑稍小的圓形遮罩，這樣漏出一個圓環可以當作進度條，同樣可以實現以上功能。

　　另外在這個動畫執行的過程中，我還發現有個元素的overflow:hidden樣式失效，後來在網上查閱了相關文章，發現overflow在visible以外其他值得時候，當transform發生時會重寫，因此我的旋轉動畫發生時，才會出現overflowhidden失效的情況。此時我們只需要給失效元素加上z-index：1的樣式，便解決了這個問題。

純CSS3製作圓形進度條所遇到的問題