悬停上的动画圆形条

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。