百分比圆角 

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

 

posted @ 2018-11-21 13:44  前端HL  阅读(255)  评论(0)    收藏  举报