【css3】画‘百分比圆’ 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ellipsis</title>
    <script type="text/javascript" src="js/jquery-2.2.3.min.js"></script>
    <style type="text/css">

    .circle{width:120px;height:120px;position:relative; margin:19px auto 10px auto;border-radius: 50%;background: #19ce6a;}
    .pie_left, .pie_right {width:120px; height:120px;position: absolute;top: 0;left: 0;}
    .circle-left, .circle-right {width:120px; height:120px;background:#0a4a59;border-radius: 50%;position: absolute;top: 0;left: 0;}
    .pie_right, .circle-right {clip:rect(0,auto,auto,60px);}
    .pie_left, .circle-left {clip:rect(0,60px,auto,0);}
    .mask{width:100px;height:100px;border-radius: 50%;left:10px;top:10px;background: #003444;position: absolute;text-align: center;line-height:100px;font-size: 20px;font-weight: bold;color: #fff;
    }
    .mask span{font-size:20px;}

        </style>
</head>
<body>

    <div class="circle" style="left:0">
         <div class="pie_left">
            <div class="circle-left"></div>
        </div>
        <div class="pie_right">
             <div class="circle-right"></div>
        </div>
        <div class="mask"><span id='fenshu'>44.45</span>%</div>
    </div>    

  <script type="text/javascript">  

          var num = $(".circle").find('span').text() * 3.6;
        if (num<=180) {
            $(".circle").find('.circle-right').css("transform","rotate(" + num + "deg)");
            $(".circle").find('.circle-left').css("transform","rotate(0deg)");
        } else {
            $(".circle").find('.circle-right').css("transform","rotate(180deg)");
            $(".circle").find('.circle-left').css("transform","rotate(" + (num - 180) + "deg)");
        };

 </script>
</body>
</html>
View Code

 效果图：

  

总结：学习css3  --clip:rect(top,right,bottom,left);

posted on 2017-05-22 17:46  Nyah  阅读(326)  评论(0)  编辑  收藏  举报