欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

圖解CSS3制作圓環(huán)形進度條的實例教程

前端開發(fā)者   發(fā)布時間：2016-05-26 12:01:05   作者：佚名   我要評論
圓環(huán)形進度條制作的基本思想還是畫出基本的弧線圖形,然后CSS3中我們可以控制其旋轉來串聯(lián)基本圖形,制造出部分消失的效果,下面就來帶大家學習圖解CSS3制作圓環(huán)形進度條的實例教程

首先，當有人說你能不能做一個圓形進度條效果出來時，如果是靜態(tài)完整圓形進度條，那么就很簡單了：

CSS Code復制內容到剪貼板
  1. .circleprogress{   
  2.     width: 160px;   
  3.     height: 160px;   
  4.     border:20px solid red;   
  5.     border-radius: 50%;   
  6. }  

2016526120050760.jpg (150×157)

然后就會說，這很簡單嘛。但是如果不是完整圓形的呢？想了想：

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

2016526120114570.jpg (160×140)

然后還是會說，這個也不難啦?？墒牵绻皇莿偤枚际?5度的倍數呢？

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

2016526120138653.jpg (244×213)

接下來我將在這個容器里再放兩個矩形，每個矩形都占一半：

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

2016526120213329.jpg (199×185)

這里重點說一下.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. }  

2016526120235425.jpg (180×173)

可以看到，效果已經出來了，其實本來是一個半圓弧，但由于我們設置了上邊框和右邊框，所以上邊框有一半溢出而被隱藏了，所以我們可以通過旋轉得以還原：

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

2016526120256256.jpg (192×179)

所以只要旋轉自己想要的角度就可以實現任意比例的進度條。接下來把左半圓弧也實現，變成一個全圓：

CSS Code復制內容到剪貼板
  1. .leftcircle{   
  2.     border-bottom:20px solid green;   
  3.     border-left:20px solid green;   
  4.     left:0;   
  5. }  

2016526120317703.jpg (180×163)

緊接著，就是讓它動起來，原理是這樣的， 先讓右半圓弧旋轉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. }  

2016526120354271.gif (294×233)

當然，我們只需要調整一下角度就可以實現反向的效果：

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

2016526120418687.gif (294×233)

好的，接下來就是奔向最終效果了，正如我們一開始看到的那樣，有點像我們使用360衛(wèi)士清理垃圾時的類似效果，當然不是很像啦：

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這條規(guī)則，起著關鍵作用。

相關文章

  • css制作收縮圓環(huán)旋轉效果實例代碼

    這篇文章主要介紹了css制作收縮圓環(huán)旋轉效果實例代碼,需要的朋友可以參考下
    2018-02-26

  • css3 clip實現圓環(huán)進度條的示例代碼

    這篇文章主要介紹了css3 clip實現圓環(huán)進度條的示例代碼的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-02-07

  • CSS實現圓環(huán)旋轉加載動畫

    這篇文章主要介紹了CSS實現圓環(huán)旋轉加載動畫，一個圓環(huán)表示加載進度，像一個時鐘順時針旋轉一圈，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2016-04-25

  • 實現CSS圓環(huán)的5種方法(小結)

    這篇文章主要介紹了實現CSS圓環(huán)的5種方法(小結)，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
    2018-09-05

最新評論