ホームページ > 記事 > ウェブフロントエンド > CSS3 アニメーションとボーダーを使用して円形のプログレス バーを実装する_html/css_WEB-ITnose
CSS3 アニメーションとボーダーを使用して円形のプログレス バーを実装する_html/css_WEB-ITnose
- WBOYオリジナル
- 2016-06-24 11:32:181460ブラウズ
最近フロントエンドの知識を勉強していて、border 関数が非常に強力であることがわかりました
まずデモを見てみましょう
このような円形のプログレスバーです。テキスト ボックスに 0 ～ 100 を入力します。それに応じて下のプログレス バーが回転します
これは主に境界線、回転、CSS アニメーションを使用して実現されます。主なアイデアは、 2 つの div を使用して互いの境界線をブロックし、半分だけの円を形成することです。カラーサークルを作成し、回転した 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>
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。