<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.circle {
width: 120px;
height: 120px;
position: relative;
border-radius: 50%;
background: #2c7efd;
}
.clip_left,.clip_right{
width:120px;
height:120px;
position: absolute;
top: 0px;left: 0px;
}
.circle_left, .circle_right{
width:120px;
height:120px;
position: absolute;
border-radius: 50%;
top: 0px;left: 0px;
background: #fdbf62;
}
/*出于展示用的改变背景色*/
/*.circle_left{
background: green;
}
.circle_right{
background: lightblue;
}*/
.circle_right,.clip_right {
clip:rect(0,auto,auto,60px);
}
.circle_left , .clip_left{
clip:rect(0,60px,auto,0);
}
/*
*当top和left取值为auto时，相当于0
*当bottom和right取值为auto时，相当于100%
*/
.mask {
width: 90px;
height: 90px;
border-radius: 50%;
left: 15px;
top: 15px;
background: #FFF;
position: absolute;
text-align: center;
line-height: 90px;
font-size: 16px;
}
</style>
</head>
<body>
<!--背景圆-->
<div class="circle">
<!--左半边圆-->
<div class="circle_left">
<div class="clip_left">
</div>
</div>
<!--右半边圆-->
<div class="circle_right">
<div class="clip_right"></div>
</div>
<div class="mask">
<span>40</span>%
</div>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script> $(function(){ if( $('.mask span').text() <= 50 ){ $('.circle_right').css('transform','rotate('+($('.mask span').text()*3.6)+'deg)'); }else{ $('.circle_right').css({ 'transform':'rotate(0deg)', "background":"#2c7efd" }); $('.circle_left').css('transform','rotate('+(($('.mask span').text()-50)*3.6)+'deg)'); } }) </script> </body> </html>
