• 百分比圆角


    <!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>
  • 相关阅读:
    js:DOM及其操作2
    js:DOM及其操作
    闭包,作用域,作用域链
    面向对象
    关于typeof
    javascript正则表达式&关键词检索
    关于StringAPI
    mybatis Invalid bound statement (not found)
    全国区域数据
    redis 问题整理
  • 原文地址:https://www.cnblogs.com/huanghuali/p/9994568.html
Copyright © 2020-2023  润新知