看效果先：http://sandbox.runjs.cn/show/b6bmksvn
参考：
clip:rect下png通道透明下sprite图片定位实例页面
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin: 0; padding: 0; } .clip-wrap { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 400px; height:400px; background-color: #ffb348; border-radius: 50%; } .clip-wrap .left,.clip-wrap .right { position: absolute; top:0; left:0; width: 100%; height:100%; background-color: #cccccc; border-radius: 50%; -webkit-transition: all 0.5s linear; } .clip-wrap .left { clip: rect(0 ,200px,400px,0); } .clip-wrap .right { clip: rect(0 ,400px,400px,200px); } .mask { position: absolute; top:50%; left:50%; margin-left: -180px; margin-top: -180px; width:360px; height:360px; background-color: #fff; border-radius: 50%; line-height: 360px; text-align: center; font-size: 100px; color: #ff9f40; } .left-wrap { position: absolute; top:0; left:0; width: 100%; height:100%; clip: rect(0 ,200px,400px,0); } .right-wrap { position: absolute; top:0; left:0; width: 100%; height:100%; clip: rect(0 ,400px,400px,200px); } </style> </head> <body> <div class="clip-wrap"> <div class="left-wrap"> <div class="left"></div> </div> <div class="right-wrap"> <div class="right"></div> </div> <div class="mask"> <span class="num">0</span>% </div> </div> <button>0%</button> <button>10%</button> <button>30%</button> <button>50%</button> <button>80%</button> <button>100%</button> </body> <script> function changeView(num) { var deg = num * 3.6; // 把360度分成100份 document.querySelector('.num').textContent = num; if(deg<180) { document.querySelector('.left').style.webkitTransform = 'rotate('+(0)+'deg)'; document.querySelector('.right').style.webkitTransform = 'rotate('+deg+'deg)'; }else { document.querySelector('.right').style.webkitTransform = 'rotate('+180+'deg)'; document.querySelector('.left').style.webkitTransform = 'rotate('+(deg-180)+'deg)'; } } var btn = document.querySelectorAll('button'); for(var i = 0,len = btn.length; i< len; i++) { (function(i) { btn[i].onclick = function() { var num = parseInt(this.textContent); changeView(num); } })(i) } </script> </html>