css实现圆形进度条

先来看一下效果图：

具体实现步骤：

先画一个大圆，底色为#ffffff;

 <div class="third"> </div>

.third{
    background-color: #FFFFFF;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    position: relative;
}

2.再画一个浅绿色的圆和一个与与第一个圆一样的圆

<div class="third">
           <div class="second"></div>
           <div class="first"></div>
</div>

.second{
    background-color: #6ED4BF;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    clip:rect(0,91px,auto,0);
    position: absolute;
}
.first{
    background-color: #FFFFFF;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    clip:rect(0,auto,auto,91px)；
}

.second{
    background-color: #6ED4BF;
    width: 182px;
    height: 182px;
    border-radius: 50%;
    clip:rect(0,91px,auto,0);
    position: absolute;
    transform: rotate(30deg);  //旋转30度
}

4.最后再画一个小圆，写上百分比

 <div class="third">
          <div class="second"></div>
          <div class="first"></div>
          <div class="mask">
               <span>68%</span>
          </div>
  </div>

.third *{
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.mask>span{
    display: block;
    font-size: 44px;
    color: white;
    line-height: 150px;
}

本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/8349.html