你的位置:首页 > 网页设计

[网页设计]利用css3动画和border来实现圆形进度条


最近在学习前端的一些知识,发现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>