首页 > > 网页制作 > css >

图解CSS3制作圆环形进度条的实例教程

2018-06-24 00:51:34来源：未知阅读 ()

圆环形进度条制作的基本思想还是画出基本的弧线图形,然后CSS3中我们可以控制其旋转来串联基本图形,制造出部分消失的效果,下面就来带大家学习图解CSS3制作圆环形进度条的实例教程

首先，当有人说你能不能做一个圆形进度条效果出来时，如果是静态完整圆形进度条，那么就很简单了：

    .circleprogress{   
        width: 160px;   
        height: 160px;   
        border:20px solid red;   
        border-radius: 50%;   
    }

2016526120050760.jpg (150×157)

    .circleprogress{   
      width: 160px;   
      height: 160px;   
      border:20px solid red;   
      border-left:20px solid transparent;   
      border-bottom:20px solid transparent;   
      border-radius: 50%;   
    }

2016526120114570.jpg (160×140)

然后还是会说，这个也不难啦。可是，如果不是刚好都是45度的倍数呢？

OK，我们先设置一个200x200的方块，然后我们在这里面完成我们的效果：

    .circleProgress_wrapper{   
      width: 200px;   
      height: 200px;   
      margin: 50px auto;   
      position: relative;   
      border:1px solid #ddd;   
    }

2016526120138653.jpg (244×213)

接下来我将在这个容器里再放两个矩形，每个矩形都占一半：

    <div class="circleProgress_wrapper">  
            <div class="wrapper right">  
                <div class="circleProgress rightcircle"></div>  
            </div>  
            <div class="wrapper left">  
                <div class="circleProgress leftcircle"></div>  
            </div>  
     </div>  





    .wrapper{   
      width: 100px;   
      height: 200px;   
      position: absolute;   
      top:0;   
      overflow: hidden;   
    }   
    .rightright{   
      rightright:0;   
    }   
    .left{   
      left:0;   
    }

2016526120213329.jpg (199×185)

这里重点说一下.wrapper 的overflow:hidden; 起着关键性作用。这两个矩形都设置了溢出隐藏，那么当我们去旋转矩形里面的圆形的时候，溢出部分就被隐藏掉了，这样我们就可以达到我们想要的效果。

从html结构也已看到，在左右矩形里面还会各自有一个圆形，先讲一下右半圆：

    .circleProgress{   
      width: 160px;   
      height: 160px;   
      border:20px solid transparent;   
      border-radius: 50%;   
      position: absolute;   
      top:0;   
    }   
    .rightcircle{   
      border-top:20px solid green;   
      border-right:20px solid green;   
      rightright:0;   
    }

2016526120235425.jpg (180×173)

可以看到，效果已经出来了，其实本来是一个半圆弧，但由于我们设置了上边框和右边框，所以上边框有一半溢出而被隐藏了，所以我们可以通过旋转得以还原：

    .circleProgress{   
      width: 160px;   
      height: 160px;   
      border:20px solid transparent;   
      border-radius: 50%;   
      position: absolute;   
      top:0;   
      -webkit-transform: rotate(45deg);   
    }

2016526120256256.jpg (192×179)

所以只要旋转自己想要的角度就可以实现任意比例的进度条。接下来把左半圆弧也实现，变成一个全圆：

.leftcircle{
    border-bottom:20px solid green;
    border-left:20px solid green;
    left:0;
}

2016526120317703.jpg (180×163)

紧接着，就是让它动起来，原理是这样的，先让右半圆弧旋转180度，再让左半圆弧旋转180度，这样，两个半圆弧由于先后都全部溢出而消失了，所以看起来就是进度条再滚动的效果：

        .rightcircle{   
      border-top:20px solid green;   
      border-right:20px solid green;   
      rightright:0;   
      -webkit-animation: circleProgressLoad_right 5s linear infinite;   
    }   
    .leftcircle{   
      border-bottom:20px solid green;   
      border-left:20px solid green;   
      left:0;   
      -webkit-animation: circleProgressLoad_left 5s linear infinite;   
    }   
    @-webkit-keyframes circleProgressLoad_right{   
      0%{   
        -webkit-transform: rotate(45deg);   
      }   
      50%,100%{   
        -webkit-transform: rotate(225deg);   
      }   
    }   
    @-webkit-keyframes circleProgressLoad_left{   
      0%,50%{   
        -webkit-transform: rotate(45deg);   
      }   
      100%{   
        -webkit-transform: rotate(225deg);   
      }   
    }

2016526120354271.gif (294×233)

当然，我们只需要调整一下角度就可以实现反向的效果：

    .circleProgress{
  width: 160px;
  height: 160px;
  border:20px solid transparent;
  border-radius: 50%;
  position: absolute;
  top:0;
  -webkit-transform: rotate(-135deg);
}
@-webkit-keyframes circleProgressLoad_right{
  0%{
    -webkit-transform: rotate(-135deg);
  }
  50%,100%{
    -webkit-transform: rotate(45deg);
  }
}
@-webkit-keyframes circleProgressLoad_left{
  0%,50%{
    -webkit-transform: rotate(-135deg);
  }
  100%{
    -webkit-transform: rotate(45deg);
  }
}

2016526120418687.gif (294×233)

好的，接下来就是奔向最终效果了，正如我们一开始看到的那样，有点像我们使用360卫士清理垃圾时的类似效果，当然不是很像啦：

        .circleProgress_wrapper{   
      width: 200px;   
      height: 200px;   
      margin: 50px auto;   
      position: relative;   
      border:1px solid #ddd;   
    }   
    .wrapper{   
      width: 100px;   
      height: 200px;   
      position: absolute;   
      top:0;   
      overflow: hidden;   
    }   
    .rightright{   
      rightright:0;   
    }   
    .left{   
      left:0;   
    }   
    .circleProgress{   
      width: 160px;   
      height: 160px;   
      border:20px solid rgb(232, 232, 12);   
      border-radius: 50%;   
      position: absolute;   
      top:0;   
      -webkit-transform: rotate(45deg);   
    }   
    .rightcircle{   
      border-top:20px solid green;   
      border-right:20px solid green;   
      rightright:0;   
      -webkit-animation: circleProgressLoad_right 5s linear infinite;   
    }   
    .leftcircle{   
      border-bottom:20px solid green;   
      border-left:20px solid green;   
      left:0;   
      -webkit-animation: circleProgressLoad_left 5s linear infinite;   
    }   
    @-webkit-keyframes circleProgressLoad_right{   
      0%{   
        border-top:20px solid #ED1A1A;   
        border-right:20px solid #ED1A1A;   
        -webkit-transform: rotate(45deg);   
      }   
      50%{   
        border-top:20px solid rgb(232, 232, 12);   
        border-right:20px solid rgb(232, 232, 12);   
        border-left:20px solid rgb(81, 197, 81);   
        border-bottom:20px solid rgb(81, 197, 81);   
        -webkit-transform: rotate(225deg);   
      }   
      100%{   
        border-left:20px solid green;   
        border-bottom:20px solid green;   
        -webkit-transform: rotate(225deg);   
      }   
    }   
    @-webkit-keyframes circleProgressLoad_left{   
      0%{   
        border-bottom:20px solid #ED1A1A;   
        border-left:20px solid #ED1A1A;   
        -webkit-transform: rotate(45deg);   
      }   
      50%{   
        border-bottom:20px solid rgb(232, 232, 12);   
        border-left:20px solid rgb(232, 232, 12);   
        border-top:20px solid rgb(81, 197, 81);   
        border-right:20px solid rgb(81, 197, 81);   
        -webkit-transform: rotate(45deg);   
      }   
      100%{   
        border-top:20px solid green;   
        border-right:20px solid green;   
        border-bottom:20px solid green;   
        border-left:20px solid green;   
        -webkit-transform: rotate(225deg);   
      }   
    }

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有