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

首先,當(dāng)有人說你能不能做一個圓形進(jìn)度條效果出來時,如果是靜態(tài)完整圓形進(jìn)度條,那么就很簡單了:
- .circleprogress{
- width: 160px;
- height: 160px;
- border:20px solid red;
- border-radius: 50%;
- }
然后就會說,這很簡單嘛。但是如果不是完整圓形的呢?想了想:
- .circleprogress{
- width: 160px;
- height: 160px;
- border:20px solid red;
- border-left:20px solid transparent;
- border-bottom:20px solid transparent;
- border-radius: 50%;
- }
然后還是會說,這個也不難啦。可是,如果不是剛好都是45度的倍數(shù)呢?
OK,我們先設(shè)置一個200x200的方塊,然后我們在這里面完成我們的效果:
- .circleProgress_wrapper{
- width: 200px;
- height: 200px;
- margin: 50px auto;
- position: relative;
- border:1px solid #ddd;
- }
接下來我將在這個容器里再放兩個矩形,每個矩形都占一半:
- <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>
- .wrapper{
- width: 100px;
- height: 200px;
- position: absolute;
- top:0;
- overflow: hidden;
- }
- .rightright{
- rightright:0;
- }
- .left{
- left:0;
- }
這里重點說一下.wrapper 的overflow:hidden; 起著關(guān)鍵性作用。這兩個矩形都設(shè)置了溢出隱藏,那么當(dāng)我們?nèi)バD(zhuǎn)矩形里面的圓形的時候,溢出部分就被隱藏掉了,這樣我們就可以達(dá)到我們想要的效果。
從html結(jié)構(gòu)也已看到,在左右矩形里面還會各自有一個圓形,先講一下右半圓:
- .circleProgress{
- width: 160px;
- height: 160px;
- border:20px solid transparent;
- border-radius: 50%;
- position: absolute;
- top:0;
- }
- .rightcircle{
- border-top:20px solid green;
- border-right:20px solid green;
- rightright:0;
- }
可以看到,效果已經(jīng)出來了,其實本來是一個半圓弧,但由于我們設(shè)置了上邊框和右邊框,所以上邊框有一半溢出而被隱藏了,所以我們可以通過旋轉(zhuǎn)得以還原:
- .circleProgress{
- width: 160px;
- height: 160px;
- border:20px solid transparent;
- border-radius: 50%;
- position: absolute;
- top:0;
- -webkit-transform: rotate(45deg);
- }
所以只要旋轉(zhuǎn)自己想要的角度就可以實現(xiàn)任意比例的進(jìn)度條。接下來把左半圓弧也實現(xiàn),變成一個全圓:
- .leftcircle{
- border-bottom:20px solid green;
- border-left:20px solid green;
- left:0;
- }
緊接著,就是讓它動起來,原理是這樣的, 先讓右半圓弧旋轉(zhuǎn)180度,再讓左半圓弧旋轉(zhuǎn)180度 ,這樣,兩個半圓弧由于先后都全部溢出而消失了,所以看起來就是進(jìn)度條再滾動的效果:
- .rightcircle{
- border-top:20px solid green;
- border-right:20px solid green;
- rightright: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%{
- -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);
- }
- }
當(dāng)然,我們只需要調(diào)整一下角度就可以實現(xiàn)反向的效果:
- .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衛(wèi)士清理垃圾時的類似效果,當(dāng)然不是很像啦:
- .circleProgress_wrapper{
- width: 200px;
- height: 200px;
- margin: 50px auto;
- position: relative;
- border:1px solid #ddd;
- }
- .wrapper{
- width: 100px;
- height: 200px;
- position: absolute;
- top:0;
- overflow: hidden;
- }
- .rightright{
- rightright: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;
- rightright: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);
- }
- }
可以看到,其實就是多了一些改變不同邊框顏色的動畫而已,這個就給大家自己去實踐吧! 主要還是利用兩個矩形來完成這么一個圓形進(jìn)度條效果,特別注意overflow這條規(guī)則,起著關(guān)鍵作用。
相關(guān)文章
css制作收縮圓環(huán)旋轉(zhuǎn)效果實例代碼
這篇文章主要介紹了css制作收縮圓環(huán)旋轉(zhuǎn)效果實例代碼,需要的朋友可以參考下2018-02-26css3 clip實現(xiàn)圓環(huán)進(jìn)度條的示例代碼
這篇文章主要介紹了css3 clip實現(xiàn)圓環(huán)進(jìn)度條的示例代碼的相關(guān)資料,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-02-07CSS實現(xiàn)圓環(huán)旋轉(zhuǎn)加載動畫
這篇文章主要介紹了CSS實現(xiàn)圓環(huán)旋轉(zhuǎn)加載動畫,一個圓環(huán)表示加載進(jìn)度,像一個時鐘順時針旋轉(zhuǎn)一圈,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-04-25實現(xiàn)CSS圓環(huán)的5種方法(小結(jié))
這篇文章主要介紹了實現(xiàn)CSS圓環(huán)的5種方法(小結(jié)),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-09-05