您好,登錄后才能下訂單哦!
這篇文章給大家介紹CSS3怎么制作圓環(huán)形進(jìn)度條,內(nèi)容非常詳細(xì),感興趣的小伙伴們可以參考借鑒,希望對大家能有所幫助。
首先,當(dāng)有人說你能不能做一個圓形進(jìn)度條效果出來時,如果是靜態(tài)完整圓形進(jìn)度條,那么就很簡單了:
CSS Code復(fù)制內(nèi)容到剪貼板
.circleprogress{ width: 160px; height: 160px; border:20px solid red; border-radius: 50%; }
然后就會說,這很簡單嘛。但是如果不是完整圓形的呢?想了想:
CSS Code復(fù)制內(nèi)容到剪貼板
.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的方塊,然后我們在這里面完成我們的效果:
CSS Code復(fù)制內(nèi)容到剪貼板
.circleProgress_wrapper{ width: 200px; height: 200px; margin: 50px auto; position: relative; border:1px solid #ddd; }
接下來我將在這個容器里再放兩個矩形,每個矩形都占一半:
XML/HTML Code復(fù)制內(nèi)容到剪貼板
<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>
CSS Code復(fù)制內(nèi)容到剪貼板
.wrapper{ width: 100px; height: 200px; position: absolute; top:0; overflow: hidden; } .rightright{ rightright:0; } .left{ left:0; }
這里重點(diǎn)說一下.wrapper 的overflow:hidden; 起著關(guān)鍵性作用。這兩個矩形都設(shè)置了溢出隱藏,那么當(dāng)我們?nèi)バD(zhuǎn)矩形里面的圓形的時候,溢出部分就被隱藏掉了,這樣我們就可以達(dá)到我們想要的效果。
從html結(jié)構(gòu)也已看到,在左右矩形里面還會各自有一個圓形,先講一下右半圓:
CSS Code復(fù)制內(nèi)容到剪貼板
.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í)本來是一個半圓弧,但由于我們設(shè)置了上邊框和右邊框,所以上邊框有一半溢出而被隱藏了,所以我們可以通過旋轉(zhuǎn)得以還原:
CSS Code復(fù)制內(nèi)容到剪貼板
.circleProgress{ width: 160px; height: 160px; border:20px solid transparent; border-radius: 50%; position: absolute; top:0; -webkit-transform: rotate(45deg); }
所以只要旋轉(zhuǎn)自己想要的角度就可以實(shí)現(xiàn)任意比例的進(jìn)度條。接下來把左半圓弧也實(shí)現(xiàn),變成一個全圓:
CSS Code復(fù)制內(nèi)容到剪貼板
.
leftcircle{ border-bottom:20px solid green; border-left:20px solid green; left:0; }
緊接著,就是讓它動起來,原理是這樣的, 先讓右半圓弧旋轉(zhuǎn)180度,再讓左半圓弧旋轉(zhuǎn)180度 ,這樣,兩個半圓弧由于先后都全部溢出而消失了,所以看起來就是進(jìn)度條再滾動的效果:
CSS Code復(fù)制內(nèi)容到剪貼板
.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)整一下角度就可以實(shí)現(xiàn)反向的效果:
CSS Code復(fù)制內(nèi)容到剪貼板
.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); } }
好的,接下來就是奔向最終效果了,正如我們一開始看到的那樣,有點(diǎn)像我們使用360衛(wèi)士清理垃圾時的類似效果,當(dāng)然不是很像啦:
CSS Code復(fù)制內(nèi)容到剪貼板
.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); } }
可以看到,其實(shí)就是多了一些改變不同邊框顏色的動畫而已,這個就給大家自己去實(shí)踐吧! 主要還是利用兩個矩形來完成這么一個圓形進(jìn)度條效果,特別注意overflow這條規(guī)則,起著關(guān)鍵作用。
關(guān)于CSS3怎么制作圓環(huán)形進(jìn)度條就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,可以學(xué)到更多知識。如果覺得文章不錯,可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。