图解CSS3制做圆环状进度条的案例实例教程

日期:2021-01-20 类型:科技新闻 

关键词:微信公众号平台小程序,微信打分小程序,小程序发布,小程序大全,微信小程序编程

最先,当有人说你能不可以做1个圆形进度条实际效果出来时,假如是静态数据详细圆形进度条,那末就很简易了:

CSS Code拷贝內容到剪贴板
  1. .circleprogress{   
  2.     width160px;   
  3.     height160px;   
  4.     border:20px solid red;   
  5.     border-radius: 50%;   
  6. }  

随后就会说,这很简易嘛。可是假如并不是详细圆形的呢?想了想:

CSS Code拷贝內容到剪贴板
  1. .circleprogress{   
  2.   width160px;   
  3.   height160px;   
  4.   border:20px solid red;   
  5.   border-left:20px solid transparent;   
  6.   border-bottom:20px solid transparent;   
  7.   border-radius: 50%;   
  8. }  

随后還是会说,这个也不难啦。但是,假如并不是恰好全是45度的倍数呢?

OK,大家先设定1个200x200的方块,随后大家在这里边进行大家的实际效果:

CSS Code拷贝內容到剪贴板
  1. .circleProgress_wrapper{   
  2.   width200px;   
  3.   height200px;   
  4.   margin50px auto;   
  5.   positionrelative;   
  6.   border:1px solid #ddd;   
  7. }  

接下来我将在这个器皿里再放两个矩形框,每一个矩形框都占1半:

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.   width100px;   
  3.   height200px;   
  4.   positionabsolute;   
  5.   top:0;   
  6.   overflowhidden;   
  7. }   
  8. .rightright{   
  9.   rightright:0;   
  10. }   
  11. .left{   
  12.   left:0;   
  13. }  

这里关键说1下.wrapper 的overflow:hidden; 起着重要性功效。这两个矩形框都设定了外溢掩藏,那末当大家去转动矩形框里边的圆形的情况下,外溢一部分就被掩藏掉了,这样大家便可以做到大家要想的实际效果。

从html构造也已看到,在上下矩形框里边还会各有有1个圆形,先讲1下右半圆:

CSS Code拷贝內容到剪贴板
  1. .circleProgress{   
  2.   width160px;   
  3.   height160px;   
  4.   border:20px solid transparent;   
  5.   border-radius: 50%;   
  6.   positionabsolute;   
  7.   top:0;   
  8. }   
  9. .rightcircle{   
  10.   border-top:20px solid green;   
  11.   border-right:20px solid green;   
  12.   rightright:0;   
  13. }  

能够看到,实际效果早已出来了,实际上原本是1个半圆弧,但因为大家设定了上边框和右侧框,因此上边框有1半外溢而被掩藏了,因此大家能够根据转动得以复原:

CSS Code拷贝內容到剪贴板
  1. .circleProgress{   
  2.   width160px;   
  3.   height160px;   
  4.   border:20px solid transparent;   
  5.   border-radius: 50%;   
  6.   positionabsolute;   
  7.   top:0;   
  8.   -webkit-transform: rotate(45deg);   
  9. }  

因此要是转动自身要想的角度便可以完成随意占比的进度条。接下来把左半圆弧也完成,变为1个全圆:

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

自然,大家只必须调剂1下角度便可以完成反方向的实际效果:

CSS Code拷贝內容到剪贴板
  1.     .circleProgress{   
  2.   width160px;   
  3.   height160px;   
  4.   border:20px solid transparent;   
  5.   border-radius: 50%;   
  6.   positionabsolute;   
  7.   top:0;   
  8.   -webkit-transform: rotate(⑴35deg);   
  9. }   
  10. @-webkit-keyframes circleProgressLoad_right{   
  11.   0%{   
  12.     -webkit-transform: rotate(⑴35deg);   
  13.   }   
  14.   50%,100%{   
  15.     -webkit-transform: rotate(45deg);   
  16.   }   
  17. }   
  18. @-webkit-keyframes circleProgressLoad_left{   
  19.   0%,50%{   
  20.     -webkit-transform: rotate(⑴35deg);   
  21.   }   
  22.   100%{   
  23.     -webkit-transform: rotate(45deg);   
  24.   }   
  25. }  

好的,接下来便是奔向最后实际效果了,正如大家1刚开始看到的那样,有点像大家应用360卫士清除废弃物时的相近实际效果,自然并不是很像啦:

CSS Code拷贝內容到剪贴板
  1.     .circleProgress_wrapper{   
  2.   width200px;   
  3.   height200px;   
  4.   margin50px auto;   
  5.   positionrelative;   
  6.   border:1px solid #ddd;   
  7. }   
  8. .wrapper{   
  9.   width100px;   
  10.   height200px;   
  11.   positionabsolute;   
  12.   top:0;   
  13.   overflowhidden;   
  14. }   
  15. .rightright{   
  16.   rightright:0;   
  17. }   
  18. .left{   
  19.   left:0;   
  20. }   
  21. .circleProgress{   
  22.   width160px;   
  23.   height160px;   
  24.   border:20px solid rgb(232, 232, 12);   
  25.   border-radius: 50%;   
  26.   positionabsolute;   
  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. }  

能够看到,实际上便是多了1些更改不一样边框色调的动漫罢了,这个就给大伙儿自身去实践活动吧! 关键還是运用两个矩形框来进行这么1个圆形进度条实际效果,非常留意overflow这条标准,起着重要功效。