javascript - 如何使用 HTML/CSS/JS 为表示经过时间的半圆形仪表设置动画？

Question

我正在寻找一种解决方案，以解决如何对以下图像进行动画处理，以指示经过的时间，如下所示。为了便于解释，我希望动画以 10% 的间隔发生（尽管我展示了 67% 的图像示例。）实际上，您在仪表中看到的彩色渐变将被显示出来，并且可能在这些位置上被取消遮罩不同的 10% 间隔以显示更多的彩色渐变。我可以使用某种掩蔽技术<div>和一些 CSS3 转换吗？我在 PhotoShop 的不同层中有这张图片，所以我绝对可以操纵这些元素。我该怎么做呢？

这是完成 67% 时的样子：

..并且 100% 完成：

Answer 1

有一些方法可以做到这一点。

最近最常用的是 JS 和 canvas，但也有纯 CSS3 方法。我将发布的所有这些都使用一个完整的圆圈，但在您的情况下，您可以将其用作基础并根据您的需要进行编辑。

JS/画布：

• http://p.ar2oor.pl/cprogress/
• http://anthonyterrien.com/knob/

CSS3：

• http://fromanegg.com/post/41302147556/100-pure-css-radial-progress-bar
• http://www.alessioatzeni.com/blog/css3-loading-animation-loop/

更多结果，谷歌'css径向进度条'。