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