css3+jq制作百分比圆环，扇形图（两种颜色）

如图所示
代码如下：
<html>
<head>
    <meta charset="UTF-8">
    <title>扇形绘制</title>
    <style>
        .muscle {
            position: relative;
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background-color: #7ec2f3;
            z-index: 10;
        }
        .fat {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background-color: #ffbb4f;
            top: 9px;
            left: 239px;
            z-index: 9;
        }
        .other  {
            position: absolute;
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background-color: #ff6260;
            top: 9px;
            left: 469px;
            z-index: 8;
        }
        .pre {
            position: absolute;
            width: 150px;
            height: 150px;
            border-radius: 100px;
            background-color: #fff;
            top: 32px;
            left: 32px;
            z-index: 11;
        }
        .sx1{
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(0deg);
            clip: rect(0px,100px,200px,0px); /*这个clip属性用来绘制半圆，在clip的rect范围内的内容显示出来，使用clip属性，元素必须是absolute的 */
            border-radius: 100px;
            background-color: #f00;
        }
        .sx2{
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(0deg);
            clip: rect(0px,100px,200px,0px);
            border-radius: 100px;
            background-color: #f00;
        }
        .muscle-sx3{
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(30deg);
            clip: rect(0px,200px,200px,100px);
            border-radius: 100px;
            background-color: #7ec2f3;
        }
        .fat-sx3{
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(30deg);
            clip: rect(0px,200px,200px,100px);
            border-radius: 100px;
            background-color: #ffbb4f;
        }
        .other-sx3{
            position: absolute;
            width: 200px;
            height: 200px;
            transform: rotate(30deg);
            clip: rect(0px,200px,200px,100px);
            border-radius: 100px;
            background-color: #ff6260;
        }

</style>
</head>

<body>
<div class="muscle">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>

<div class="fat">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>

<div class="other">
    <div class="sx1"></div>
     <div class="sx2"></div>
</div>
<div class="pre"></div>
<script src="jquery-1.11.3.js"></script>
<script>
    $(function(){
        var muscle=30,fat=10,other=10;
        if(muscle>50){
            $(".muscle .sx2").addClass("muscle-sx3");
            $(".muscle .muscle-sx3").css("transform","rotate("+(muscle/5*18-180)+"deg)").css("color","#fff");
        }else{
            $(".muscle .sx2").css("transform","rotate("+(muscle/5*18-180)+"deg)").css("color","#fff");
        }
        if((fat+muscle)>50){
            $(".fat .sx2").addClass("fat-sx3");
            $(".fat .fat-sx3").css("transform","rotate("+((fat+muscle)/5*18-180)+"deg)").css("color","#fff");
        }else{
            $(".fat .sx2").css("transform","rotate("+((fat+muscle)/5*18-180)+"deg)").css("color","#fff");
        }
        if((other+fat+muscle)>50){
            $(".other .sx2").addClass("other-sx3");
            $(".other .other-sx3").css("transform","rotate("+((other+fat+muscle)/5*18-180)+"deg)").css("color","#fff");
        }else{
            $(".other .sx2").css("transform","rotate("+((other+fat+muscle)/5*18-180)+"deg)").css("color","#fff");
        }
    })
</script>
</body> 
</html>
提示：只有两种颜色，如果想要三种需要再加一个半圆。
css3+jq制作百分比圆环，扇形图（两种颜色）

猜你喜欢
