利用css3动画和border来实现圆形进度条_html/css_WEB-ITnose

最近在学习前端的一些知识，发现border的功能十分强大啊!

首先来看看demo

就是这么一个圆形的进度条，在文本框中输入0-100的数值下面的进度条相应的转到多少

这个主要是利用border，旋转和css动画来实现的，主要思想是利用两个div来互相遮挡border形成的一个只有半圈有颜色的圆形，再利用旋转div的角度来调整显示

上代码：

html+css+js(这里引入了jquery)

    
        
            进度条:
        
            
                            
            
                            
            
0%