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

前端  /  管理员 发布于 7年前   173

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

CSS Code复制内容到剪贴板

1. .circleprogress{   
2.     width: 160px;   
3.     height: 160px;   
4.     border:20px solid red;   
5.     border-radius: 50%;   
6. }  

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

CSS Code复制内容到剪贴板

1. .circleprogress{   
2.   width: 160px;   
3.   height: 160px;   
4.   border:20px solid red;   
5.   border-left:20px solid transparent;   
6.   border-bottom:20px solid transparent;   
7.   border-radius: 50%;   
8. }  

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

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

CSS Code复制内容到剪贴板

1. .circleProgress_wrapper{   
2.   width: 200px;   
3.   height: 200px;   
4.   margin: 50px auto;   
5.   position: relative;   
6.   border:1px solid #ddd;   
7. }  

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

XML/HTML Code复制内容到剪贴板

1. <div class="circleProgress_wrapper">  
2.         <div class="wrapper right">  
3.             <div class="circleProgress rightcircle"></div>  
4.         </div>  
5.         <div class="wrapper left">  
6.             <div class="circleProgress leftcircle"></div>  
7.         </div>  
8.  </div>  

CSS Code复制内容到剪贴板

1. .wrapper{   
2.   width: 100px;   
3.   height: 200px;   
4.   position: absolute;   
5.   top:0;   
6.   overflow: hidden;   
7. }   
8. .rightright{   
9.   rightright:0;   
10. }   
11. .left{   
12.   left:0;   
13. }  

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

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

CSS Code复制内容到剪贴板

1. .circleProgress{   
2.   width: 160px;   
3.   height: 160px;   
4.   border:20px solid transparent;   
5.   border-radius: 50%;   
6.   position: absolute;   
7.   top:0;   
8. }   
9. .rightcircle{   
10.   border-top:20px solid green;   
11.   border-right:20px solid green;   
12.   rightright:0;   
13. }  

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

CSS Code复制内容到剪贴板

1. .circleProgress{   
2.   width: 160px;   
3.   height: 160px;   
4.   border:20px solid transparent;   
5.   border-radius: 50%;   
6.   position: absolute;   
7.   top:0;   
8.   -webkit-transform: rotate(45deg);   
9. }  

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

CSS Code复制内容到剪贴板

1. .leftcircle{   
2.     border-bottom:20px solid green;   
3.     border-left:20px solid green;   
4.     left:0;   
5. }  

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

CSS Code复制内容到剪贴板

1.     .rightcircle{   
2.   border-top:20px solid green;   
3.   border-right:20px solid green;   
4.   rightright:0;   
5.   -webkit-animation: circleProgressLoad_right 5s linear infinite;   
6. }   
7. .leftcircle{   
8.   border-bottom:20px solid green;   
9.   border-left:20px solid green;   
10.   left:0;   
11.   -webkit-animation: circleProgressLoad_left 5s linear infinite;   
12. }   
13. @-webkit-keyframes circleProgressLoad_right{   
14.   0%{   
15.     -webkit-transform: rotate(45deg);   
16.   }   
17.   50%,100%{   
18.     -webkit-transform: rotate(225deg);   
19.   }   
20. }   
21. @-webkit-keyframes circleProgressLoad_left{   
22.   0%,50%{   
23.     -webkit-transform: rotate(45deg);   
24.   }   
25.   100%{   
26.     -webkit-transform: rotate(225deg);   
27.   }   
28. }  

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

CSS Code复制内容到剪贴板

1.     .circleProgress{   
2.   width: 160px;   
3.   height: 160px;   
4.   border:20px solid transparent;   
5.   border-radius: 50%;   
6.   position: absolute;   
7.   top:0;   
8.   -webkit-transform: rotate(-135deg);   
9. }   
10. @-webkit-keyframes circleProgressLoad_right{   
11.   0%{   
12.     -webkit-transform: rotate(-135deg);   
13.   }   
14.   50%,100%{   
15.     -webkit-transform: rotate(45deg);   
16.   }   
17. }   
18. @-webkit-keyframes circleProgressLoad_left{   
19.   0%,50%{   
20.     -webkit-transform: rotate(-135deg);   
21.   }   
22.   100%{   
23.     -webkit-transform: rotate(45deg);   
24.   }   
25. }  

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

CSS Code复制内容到剪贴板

1.     .circleProgress_wrapper{   
2.   width: 200px;   
3.   height: 200px;   
4.   margin: 50px auto;   
5.   position: relative;   
6.   border:1px solid #ddd;   
7. }   
8. .wrapper{   
9.   width: 100px;   
10.   height: 200px;   
11.   position: absolute;   
12.   top:0;   
13.   overflow: hidden;   
14. }   
15. .rightright{   
16.   rightright:0;   
17. }   
18. .left{   
19.   left:0;   
20. }   
21. .circleProgress{   
22.   width: 160px;   
23.   height: 160px;   
24.   border:20px solid rgb(232, 232, 12);   
25.   border-radius: 50%;   
26.   position: absolute;   
27.   top:0;   
28.   -webkit-transform: rotate(45deg);   
29. }   
30. .rightcircle{   
31.   border-top:20px solid green;   
32.   border-right:20px solid green;   
33.   rightright:0;   
34.   -webkit-animation: circleProgressLoad_right 5s linear infinite;   
35. }   
36. .leftcircle{   
37.   border-bottom:20px solid green;   
38.   border-left:20px solid green;   
39.   left:0;   
40.   -webkit-animation: circleProgressLoad_left 5s linear infinite;   
41. }   
42. @-webkit-keyframes circleProgressLoad_right{   
43.   0%{   
44.     border-top:20px solid #ED1A1A;   
45.     border-right:20px solid #ED1A1A;   
46.     -webkit-transform: rotate(45deg);   
47.   }   
48.   50%{   
49.     border-top:20px solid rgb(232, 232, 12);   
50.     border-right:20px solid rgb(232, 232, 12);   
51.     border-left:20px solid rgb(81, 197, 81);   
52.     border-bottom:20px solid rgb(81, 197, 81);   
53.     -webkit-transform: rotate(225deg);   
54.   }   
55.   100%{   
56.     border-left:20px solid green;   
57.     border-bottom:20px solid green;   
58.     -webkit-transform: rotate(225deg);   
59.   }   
60. }   
61. @-webkit-keyframes circleProgressLoad_left{   
62.   0%{   
63.     border-bottom:20px solid #ED1A1A;   
64.     border-left:20px solid #ED1A1A;   
65.     -webkit-transform: rotate(45deg);   
66.   }   
67.   50%{   
68.     border-bottom:20px solid rgb(232, 232, 12);   
69.     border-left:20px solid rgb(232, 232, 12);   
70.     border-top:20px solid rgb(81, 197, 81);   
71.     border-right:20px solid rgb(81, 197, 81);   
72.     -webkit-transform: rotate(45deg);   
73.   }   
74.   100%{   
75.     border-top:20px solid green;   
76.     border-right:20px solid green;   
77.     border-bottom:20px solid green;   
78.     border-left:20px solid green;   
79.     -webkit-transform: rotate(225deg);   
80.   }   
81. }  

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