【css3】画‘百分比圆’

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ellipsistitle>
    <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.45span>%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】画‘百分比圆’_第1张图片  

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

转载于:https://www.cnblogs.com/nyah/p/6890576.html

你可能感兴趣的:(【css3】画‘百分比圆’)