首先来看看demo
就是这么一个圆形的进度条，在文本框中输入0-100的数值下面的进度条相应的转到多少
这个主要是利用border，旋转和css动画来实现的，主要思想是利用 两个div来互相遮挡border形成的一个只有半圈有颜色的圆形，再利用旋转div的角度来调整显示
上代码：
html+css+js(这里引入了jquery)
圆形进度条 .content { width: 400px; height: 400px; margin: 10px auto 100px; } .content .input{ position: relative; margin: 40px auto; } .content .cicle { position: relative; margin: 100px auto; width: 100px; height: 100px; border-width: 20px; border-color: red; border-style: solid; border-radius: 50%; } .content .cicle .bar { position: absolute; width: 70px; height: 140px; overflow: hidden; } .content .cicle .bar-left { top: -20px; left: -20px; } .content .cicle .bar-left .bar-left-an{ position: absolute; z-index: 10; width: 100px; height: 100px; border-width: 20px; border-color: transparent transparent green green; border-style: solid; border-radius: 50%; transform: rotate(-135deg); } .content .cicle .bar-right { top: -20px; left: 50px; } .content .cicle .bar-right .bar-right-an { position: absolute; left: -70px; z-index: 20; width: 100px; height: 100px; border-width: 20px; border-color: green green transparent transparent; border-style: solid; border-radius: 50%; transform: rotate(-135deg); } .content .cicle .tx { position: absolute; width: 100px; height: 100px; line-height: 100px; text-align: center; font-size: 20px; font-weight: 800; color: green; }
进度条:
查看更多关于利用css3动画和border来实现圆形进度条_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did110142