懸停上的動畫圓形條

Question

我正在構建一個投資組合網站，並希望實現一個技能集頁面，其中包含一個動畫圓形條，代表我的每項技能。圓圈周圍會有6個按鈕，當用戶懸停時，並且當一個人徘徊時，我想要一個圓形的條形圖以逆時針方向生成動畫。

我已經在photoshop中做了一個快速的.gif來演示但我找不到任何教程來幫助。

我發現這個網站在頂部，動畫餅圖展示了左側類似的概念 - Website Example

這是一個快速.gif注意樣機我在Photoshop做了什麼我想實現 - Animated Circular Bar Animation

Answer 1

您鏈接到的網站使用HTML5 canvas元素執行了動畫，該元素具有良好的support in modern Browsers。

你可以找到不錯的documentation on MDN不錯tutorial。

另一種替代方案可能是Raphaël即使對於較老的瀏覽器也支持，並且它可能更簡單易用。退房this example。