css3--根据数据加载显示的一个动画

css:

.circle {
            width: 200px;
            height: 200px;
            position: absolute;
            border-radius: 50%;
            background: #0cc;
        }
        .pie_left, .pie_right{
            width:200px;
            height:200px;
            position: absolute;
            border-radius: 50%;
            top: 0px;left: 0px;
            background: #ccc;
        }

        .pie_right {
            clip:rect(0,auto,auto,100px);
        }
        .pie_left {
            clip:rect(0,100px,auto,0);
        }
        .mask {
            width: 180px;
            height: 180px;
            border-radius: 50%;
            left: 10px;
            top: 10px;
            background: #FFF;
            position: absolute;
            text-align: center;
            line-height: 180px;
            font-size: 36px;
        }

html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="circle">
    <div class="pie_left"></div>
    <div class="pie_right"></div>
    <div class="mask"><span>100</span>%</div>
</div>
</body>
</html>

jQuery:

$(function() {
        if( $('.mask span').text() <= 50 ){
            $('.pie_right').css('transform','rotateZ('+($('.mask span').text()*3.6)+'deg)');
        }else {
            $('.pie_left').css('transform','rotateZ('+(($('.mask span').text()-50)*3.6)+'deg)');
            $('.pie_right').css('background','#0cc');
        }
    })

基本原理：
最外侧的div是背景是进度条的颜色，
其中间有三个div盒子，分别是左侧，右侧，显示百分比的区域。
左侧和右侧分别使用clip属性对其进行裁剪。
通过js进行旋转。
当值小于50的时候右侧的旋转：值*3.6+deg；
当值大于50的时候左侧旋转的度数为：值-50*3.6+deg;

 

posted @ 2017-11-27 14:36  seafwg  阅读(1003)  评论(0)  编辑  收藏  举报