悬停时的动画圆棒

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。