图解CSS3制作圆环形进度条的方法

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了图解CSS3制作圆环形进度条的方法，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含5824字，纯文字阅读大概需要9分钟。

内容图文

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

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

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

然后就会说，这很简单嘛。但是如果不是完整圆形的呢？想了想：

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

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

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

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

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

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

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

这里重点说一下.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;   
}

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

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

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

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

紧接着，就是让它动起来，原理是这样的， 先让右半圆弧旋转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);   
  }   
}

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

   .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);   
  }   
}

好的，接下来就是奔向最终效果了，正如我们一开始看到的那样，有点像我们使用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);   
  }   
}

可以看到，其实就是多了一些改变不同边框颜色的动画而已，这个就给大家自己去实践吧！ 主要还是利用两个矩形来完成这么一个圆形进度条效果，特别注意overflow这条规则，起着关键作用。

以上就是图解CSS3制作圆环形进度条的方法的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的图解CSS3制作圆环形进度条的方法全部内容，希望文章能够帮你解决图解CSS3制作圆环形进度条的方法所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---