Heim > Artikel > Web-Frontend > 利用css3动画和border来实现圆形进度条_html/css_WEB-ITnose
利用css3动画和border来实现圆形进度条_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:32:181462Durchsuche
最近在学习前端的一些知识，发现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>
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：HTML5之废弃和更新的元素与属性_html/css_WEB-ITnoseNächster Artikel：实现滑动门的三种方法_html/css_WEB-ITnose