使用HTML，CSS或javascript的動畫循環倒數計時器

Question

我想創建一個分爲4個部分的圓，然後將每個部分細分爲多個部分。每個季度都會有不同的背景顏色（或背景圖像）。

圓圈將作爲倒數計時器，每個片段將持續大約5秒鐘（請參閱附加圖像瞭解我在尋找什麼）。定時器只有在發出javascript命令時纔會啓動（它也應該可以暫停和倒回定時器）。

在段之間的過渡區不必須是平滑的動畫（即，轉變到段可以簡單地涉及先前的段的背景顏色變爲白色）

有幾個注意事項：
- 該數目在每個象限段可以改變，所以每個段的尺寸必須靈活
- 該順序象限中可以改變（即instea d）藍色，橙色，紅色，綠色...我們可以有橙色，紅色，紫色等等）
- 它必須在iPhone和現有的Android手機上工作（我在看Raphael和SVG，似乎不支持在Android上。）

我對如何最好地解決這個問題感到茫然，所以將不勝感激聽到建議，甚至看到的例子（雖然我還沒有能夠源任何）

Answer 1

我認爲實現你想要的結果的最好方法是使用一個元素並通過使用javascript對其進行繪製，或者使用動畫圖像以及靜態圖像和一些JS在這兩種類型之間切換。

Answer 2

你見過Raphaël JS？它非常適合圖形。我不確定具體情況，但這應該讓你開始。