我正在寻找一种解决方案,该方法如何使以下图像动画化,如下图所示,该图像指示经过的时间。为了便于说明,我希望动画以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径向进度栏”。