CSS3绘制环形进度条
2015-09-22 17:46
519 查看
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} .box{width:200px;height:200px;margin:10px auto;position:relative;} .box div{position:absolute;top:0;left:0;border-radius:50%;height:160px;width:160px;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;} .box .bg{border:silver 20px solid} .box .bg2{border:silver 20px solid;clip:rect(0,100px,200px,0);} .box .rount{border:green 20px solid;clip:rect(0,100px,200px,0);-webkit-transform:rotate(0deg);} .box .rount2{border:green 20px solid;clip:rect(0,200px,200px,100px);-webkit-transform:rotate(0deg);display:none} .box .num{font:bold 24px/160px tahoma;text-align:center;color:green;top:20px;left:20px;z-index:9;} .points{width:200px;margin:10px auto;text-align: center;} </style> <script src="../jquery-1.7.2.js"></script> <script> $(function(){ var points = $('#points'), rount = $('#rount'), rount2 = $('#rount2'), num = $('#num'); points.change(function(){ var n =points.val(); num.text(n + '%'); if(n<=50){ rount.css('-webkit-transform','rotate(' + 3.6*n + 'deg)'); rount2.css('display','none'); }else{ rount.css('-webkit-transform','rotate(180deg)'); rount2.css('display','block'); rount2.css('-webkit-transform','rotate(' + 3.6*(n-50) + 'deg)'); } }) }) </script> </head> <body> <div class="box"> <div class="bg"></div> <div id="rount" class="rount"></div> <div class="bg2"></div> <div id="rount2" class="rount2"></div> <div id="num" class="num">0</div> </div> <div class="points"> <span>0</span> <input type="range" id="points" min="0" max="100" step="1" value="0"> <span>100</span> </div> </body> </html>
测试结果:
相关文章推荐
- css中使用rgba和opacity设置透明度的区别
- CSS布局 ——从display,position, float属性谈起
- 你所不了解的css选择器
- css禁止html标签被选中和复制
- 修改FileUpload样式
- wpf动态设置控件样式
- 纯CSS实现的3D倒计时效果
- 四个好看的CSS样式表格
- CSS渐变
- css使用li索引或偶数行
- JS+CSS实现带小三角指引的滑动门效果
- 2015年9月21号css第一次课
- HTML+css3 工作笔记
- 《学习日记》CSS的盒子模型
- CSS的过渡效果及动画效果:transition&animation
- CSS选择器
- css初始化代码
- NPOI之Excel——合并单元格、设置样式、输入公式
- css 控制第二行字段縮進
- CSS样式常用的兼容hack写法