首先，当有人说你能不能做一个 圆 形 进度 条效果出来时，如果是静态完整圆形进度条，那么就很 简单 了：
CSS Code 复制内容到剪贴板
.circle PR ogress{ &nbs p; width : 160px ; h ei ght : 160px ; border : 20px solid red ; border -radius: 50%; }
然后就会说，这很简单嘛。但是如果不是完整圆形的呢？想了想：
CSS Code 复制内容到剪贴板
.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的方块，然后我们在这里面完成我们的效果：
CSS Code 复制内容到剪贴板
.circleProgress_wrap PE r{ width : 200px ; height : 200px ; m arg in : 50px auto ; pos IT ion : relative ; border : 1px solid # ddd ; }
接下来我将在这个容器里再放两个矩形，每个矩形都占一 半 ：
XM L/HT ML Code 复制内容到剪贴板
< 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 >
CSS Code 复制内容到剪贴板
.wrapper{ width : 100px ; height : 200px ; position : absolute ; top :0; overflow : hidden ; } . right right { right right :0; } . left { left :0; }
这里重点说一下.wrapper 的overflow:hidden; 起着关键性作用。这两个矩形都设置了 溢出隐藏 ，那么当我们去旋转矩形里面的圆形的时候，溢出部分就被隐藏掉了，这样我们就可以达到我们想要的效果。
从html结构也已看到，在左右矩形里面还会各自有一个圆形，先讲一下右半圆：
CSS Code 复制内容到剪贴板
.circleProgress{ width : 160px ; height : 160px ; border : 20px solid transparent ; border -radius: 50%; position : absolute ; top :0; } .rightcircle{ border -t op : 20px solid green ; border-right : 20px solid green ; right right :0; }
可以看到，效果已经出来了，其实本来是一个半圆弧，但由于我们设置了上边框和 右边 框，所以上边框有一半溢出而被隐藏了，所以我们可以通过旋转得以还原：
CSS Code 复制内容到剪贴板
.circleProgress{ width : 160px ; height : 160px ; border : 20px solid transparent ; border -radius: 50%; position : absolute ; top :0; - webkit -transform: rotate(45 deg ); }
所以只要旋转自己想要的角度就可以实现任意比例的进度条。接下来把左半圆弧也实现，变成一个全圆：
CSS Code 复制内容到剪贴板
.leftcircle{ border-bottom : 20px solid green ; border-left : 20px solid green ; left :0; }
紧接着，就是让它动起来，原理是这样的， 先让右半圆弧旋转180度，再让左半圆弧旋转180度 ，这样，两个半圆弧由于先后都全部溢出而 消失 了，所以看起来就是进度条再滚动的效果：
CSS Code 复制内容到剪贴板
.rightcircle{ border-top : 20px solid green ; border-right : 20px solid green ; right right :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-keyfr am es 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); } }
@H_712_1 126 @
当然，我们只需要 调整 一下角度就可以实现反向的效果：
CSS Code 复制内容到剪贴板
.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 卫士清理 垃圾 时的类似效果，当然不是很像啦：
CSS Code 复制内容到剪贴板
@H_548_1 304 @ .circleProgress_wrapper{ width : 200px ; height : 200px ; mar gin : 50px auto ; position : relative ; border : 1px solid #ddd ; } .wrapper{ width : 100px ; height : 200px ; position : absolute ; top :0; overflow : hidden ; } . right right { right right :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 ; right right :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制作圆环形进度条的实例教程 全部内容，希望文章能够帮你解决 图解CSS3制作圆环形进度条的实例教程 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于图解CSS3制作圆环形进度条的实例教程的详细内容...