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