我正在寻找一种解决方案,该方法如何使以下图像动画化,如下图所示,该图像指示经过的时间。为了便于说明,我希望动画以10%的间隔进行(尽管我显示了67%的图像示例。)实际上,在电表中看到的彩色渐变会显示出来,并且可能会在这些时候变暗不同的10%间隔以显示更多的彩色渐变。我可以对<div>以及某些CSS3转换使用某种屏蔽技术吗?我在PhotoShop的不同图层中都有此图像,因此绝对有可能操纵这些元素。我应该怎么做呢?

看起来完成了67%:


..和100%完成:

最佳答案

有一些方法可以做到。

最近使用最多的是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径向进度栏”。

08-25 13:17
查看更多