<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圆角</title>
<style type="text/css">
*{margin:0; padding:0;}
.circle {
width: 100px;
height: 100px;
position: relative;
border-radius: 50%;
background: #20a53a;
margin: 0 auto
}
.pie_left,
.pie_right {
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0
}
.left,
.right {
width: 100px;
height: 100px;
background: #ccc;
border-radius: 50%;
position: absolute;
top: 0;
left: 0
}
.pie_right,
.right {
clip: rect(0, auto, auto, 50px);
transition: transform 1s ease-in 0s;
-webkit-transition: -webkit-transform 1s ease-in 0s;
-moz-transition: -moz-transform 1s ease-in 0s;
}
.pie_left,
.left {
clip: rect(0, 50px, auto, 0);
transition: transform .4s ease-in 1s;
-webkit-transition: -webkit-transform .4s ease-in 1s;
-moz-transition: -moz-transform .4s ease-in 1s;
}
.mask {
width: 88px;
height: 88px;
border-radius: 50%;
left: 6px;
top: 6px;
background: #FFF;
position: absolute;
line-height: 88px;
font-size: 18px;
color: #20a53a
}
</style>
</head>
<body>
<div class="circle">
<div class="pie_left">
<div class="left"></div>
</div>
<div class="pie_right">
<div class="right"></div>
</div>
<div class="mask"><span>98</span>%</div>
</div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('.circle').each(function(index, el) {
var num = $(this).find('span').text() * 3.6;
if (num <= 180) {
$(this).find('.left').css('transform', "rotate(0deg)");
$(this).find('.right').css('transform', "rotate(" + num + "deg)");
} else {
$(this).find('.right').css('transform', "rotate(180deg)");
$(this).find('.left').css('transform', "rotate(" + (num - 180) + "deg)");
};
});
</script>
</body>
</html>
