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

互联网
秋在田野里。田野是金飘落的叶子色的。飘落的叶子澄澄的稻谷，远远望去，整个田野就像铺上了一块金色的地毯。

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

CSS Code复制内容到剪贴板
  1. .circleprogress{
  2. width:160px;
  3. height:160px;
  4. border:20pxsolidred;
  5. border-radius:50%;
  6. }

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

CSS Code复制内容到剪贴板
  1. .circleprogress{
  2. width:160px;
  3. height:160px;
  4. border:20pxsolidred;
  5. border-left:20pxsolidtransparent;
  6. border-bottom:20pxsolidtransparent;
  7. border-radius:50%;
  8. }

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

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

CSS Code复制内容到剪贴板
  1. .circleProgress_wrapper{
  2. width:200px;
  3. height:200px;
  4. margin:50pxauto;
  5. position:relative;
  6. border:1pxsolid#ddd;
  7. }

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

XML/HTML Code复制内容到剪贴板
  1. <divclass="circleProgress_wrapper">
  2. <divclass="wrapperright">
  3. <divclass="circleProgressrightcircle"></div>
  4. </div>
  5. <divclass="wrapperleft">
  6. <divclass="circleProgressleftcircle"></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:20pxsolidtransparent;
  5. border-radius:50%;
  6. position:absolute;
  7. top:0;
  8. }
  9. .rightcircle{
  10. border-top:20pxsolidgreen;
  11. border-right:20pxsolidgreen;
  12. rightright:0;
  13. }

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

CSS Code复制内容到剪贴板
  1. .circleProgress{
  2. width:160px;
  3. height:160px;
  4. border:20pxsolidtransparent;
  5. border-radius:50%;
  6. position:absolute;
  7. top:0;
  8. -webkit-transform:rotate(45deg);
  9. }

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

CSS Code复制内容到剪贴板
  1. .leftcircle{
  2. border-bottom:20pxsolidgreen;
  3. border-left:20pxsolidgreen;
  4. left:0;
  5. }

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

CSS Code复制内容到剪贴板
  1. .rightcircle{
  2. border-top:20pxsolidgreen;
  3. border-right:20pxsolidgreen;
  4. rightright:0;
  5. -webkit-animation:circleProgressLoad_right5slinearinfinite;
  6. }
  7. .leftcircle{
  8. border-bottom:20pxsolidgreen;
  9. border-left:20pxsolidgreen;
  10. left:0;
  11. -webkit-animation:circleProgressLoad_left5slinearinfinite;
  12. }
  13. @-webkit-keyframescircleProgressLoad_right{
  14. 0%{
  15. -webkit-transform:rotate(45deg);
  16. }
  17. 50%,100%{
  18. -webkit-transform:rotate(225deg);
  19. }
  20. }
  21. @-webkit-keyframescircleProgressLoad_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:20pxsolidtransparent;
  5. border-radius:50%;
  6. position:absolute;
  7. top:0;
  8. -webkit-transform:rotate(-135deg);
  9. }
  10. @-webkit-keyframescircleProgressLoad_right{
  11. 0%{
  12. -webkit-transform:rotate(-135deg);
  13. }
  14. 50%,100%{
  15. -webkit-transform:rotate(45deg);
  16. }
  17. }
  18. @-webkit-keyframescircleProgressLoad_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:50pxauto;
  5. position:relative;
  6. border:1pxsolid#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:20pxsolidrgb(232,232,12);
  25. border-radius:50%;
  26. position:absolute;
  27. top:0;
  28. -webkit-transform:rotate(45deg);
  29. }
  30. .rightcircle{
  31. border-top:20pxsolidgreen;
  32. border-right:20pxsolidgreen;
  33. rightright:0;
  34. -webkit-animation:circleProgressLoad_right5slinearinfinite;
  35. }
  36. .leftcircle{
  37. border-bottom:20pxsolidgreen;
  38. border-left:20pxsolidgreen;
  39. left:0;
  40. -webkit-animation:circleProgressLoad_left5slinearinfinite;
  41. }
  42. @-webkit-keyframescircleProgressLoad_right{
  43. 0%{
  44. border-top:20pxsolid#ED1A1A;
  45. border-right:20pxsolid#ED1A1A;
  46. -webkit-transform:rotate(45deg);
  47. }
  48. 50%{
  49. border-top:20pxsolidrgb(232,232,12);
  50. border-right:20pxsolidrgb(232,232,12);
  51. border-left:20pxsolidrgb(81,197,81);
  52. border-bottom:20pxsolidrgb(81,197,81);
  53. -webkit-transform:rotate(225deg);
  54. }
  55. 100%{
  56. border-left:20pxsolidgreen;
  57. border-bottom:20pxsolidgreen;
  58. -webkit-transform:rotate(225deg);
  59. }
  60. }
  61. @-webkit-keyframescircleProgressLoad_left{
  62. 0%{
  63. border-bottom:20pxsolid#ED1A1A;
  64. border-left:20pxsolid#ED1A1A;
  65. -webkit-transform:rotate(45deg);
  66. }
  67. 50%{
  68. border-bottom:20pxsolidrgb(232,232,12);
  69. border-left:20pxsolidrgb(232,232,12);
  70. border-top:20pxsolidrgb(81,197,81);
  71. border-right:20pxsolidrgb(81,197,81);
  72. -webkit-transform:rotate(45deg);
  73. }
  74. 100%{
  75. border-top:20pxsolidgreen;
  76. border-right:20pxsolidgreen;
  77. border-bottom:20pxsolidgreen;
  78. border-left:20pxsolidgreen;
  79. -webkit-transform:rotate(225deg);
  80. }
  81. }

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

以上就是图解CSS3制作圆环形进度条的实例好代码教程。假如你曾歌颂黎明，那么也请你拥抱黑夜。更多关于图解CSS3制作圆环形进度条的实例好代码教程请关注haodaima.com其它相关文章！

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例