正文

【css3】画‘百分比圆’

IP云
IP云V管理员/8 阅读
09/01
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

<!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>

效果图：

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