悬停时的动画圆形条

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。