欢迎光临
屌丝博客

CSS圆环控制

<!DOCTYPE html>
<html>
    <script type='text/javascript' src='http://ajax.useso.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=3.4.2'></script>

    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>

    <body>
        <div class="circle pie">
            <div class="pie_left">
                <div class="left"></div>
            </div>
            <div class="pie_right">
                <div class="right"></div>
            </div>
            <div class="mask"><span>20</span>%</div>
        </div>

    </body>
    <style type="text/css">
        .circle {
            width: 162px;
            height: 162px;  
            position: absolute;
            border-radius: 50%;
            background: #E94B5A;
        }
        .pie_left, .pie_right {
            width: 162px; 
            height: 162px;
            position: absolute;
            top: 0;left: 0;
        }
        .left, .right {
            display: block;
            width:162px; 
            height:162px;
            background:#DDDDDD;
            border-radius: 50%;
            position: absolute;
            top: 0;
            left: 0;
        }
        .pie_right, .right {
            clip:rect(0,auto,auto,81px);
        }
        .pie_left, .left {
            clip:rect(0,81px,auto,0);
        }
        .mask {
            width: 145px;
            height: 145px;
            border-radius: 50%;
            left: 8px;
            top: 8px;
            background: #FFF;
            position: absolute;
            text-align: center;
            line-height: 150px;
            font-size: 16px;
        }
    </style>
    <script type="text/javascript">
        $(function() {
            $('.pie').each(function(index, el) {
                var num = $(this).find('span').text() * 3.6;
                if (num <= 180) {
                    $(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>

</html>