Home >Web Front-end >HTML Tutorial >利用css3动画和border来实现圆形进度条_html/css_WEB-ITnose
利用css3动画和border来实现圆形进度条_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:32:181539browse
最近在学习前端的一些知识，发现border的功能十分强大啊!
首先来看看demo
就是这么一个圆形的进度条，在文本框中输入0-100的数值下面的进度条相应的转到多少
这个主要是利用border，旋转和css动画来实现的，主要思想是利用两个div来互相遮挡border形成的一个只有半圈有颜色的圆形，再利用旋转div的角度来调整显示
上代码：
html+css+js(这里引入了jquery)
<!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <meta name="KeyWord" content="cicle,learning"> <meta name="description" content="cicle-learning"> <meta name="Author" content="alsy"> <title>圆形进度条</title> <!-- style-start --> <!-- style-end --> <style> .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; } </style> </head> <body> <div class="content"> <div class="input"> <label>进度条:</label><input type="text" id="inp"/> </div> <div class="cicle"> <div class="bar bar-left"> <div class="bar-left-an"></div> </div> <div class="bar bar-right"> <div class="bar-right-an"></div> </div> <div class="tx">0%</div> </div> </div> <!-- import-js --> <script type="text/javascript" src="js/jquery.js"></script> <!-- import-my-js --> <script type="text/javascript"> $(document).ready(function() { var cicle = cle = function() { var oTx = $(".tx"); var cicleTransform = function(num, old_num) { var b_l_a = $(".bar-left-an"); var b_r_a = $(".bar-right-an"); var c_num = num; if(c_num > 50) { b_r_a.css({ "transform": "rotate(45deg)", "transition": "transform 1s linear" }); setTimeout(function() { b_l_a.css({ "transform": "rotate(" + (((c_num-50)/100*360)-135) + "deg)", "transition": "transform 1s linear" }); },1000); } else { if(old_num > 50) { setTimeout(function() { b_r_a.css({ "transform": "rotate(" + ((c_num/100*360)-135) + "deg)", "transition": "transform 1s linear" }); },1000); b_l_a.css({ "transform": "rotate(-135deg)", "transition": "transform 1s linear" }); } else { b_r_a.css({ "transform": "rotate(" + ((c_num/100*360)-135) + "deg)", "transition": "transform 1s linear" }); } } } var setnum = function(num) { oTx.text(num + "%"); } var getnum = function() { return parseInt(oTx.text()); } var inputB = function() { $("#inp").blur(function() { var num = parseInt($.trim( $(this).val() )); if(num>=0 && num <= 100){ cicleTransform(num, getnum()); setnum(num); }else{ alert("输入100以内的数值！"); } }); } return { init: function() { inputB(); } } }(); cicle.init(); }); </script> </body></html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：HTML5之废弃和更新的元素与属性_html/css_WEB-ITnoseNext article：实现滑动门的三种方法_html/css_WEB-ITnose