今天手把手教大家用CSS3制作圓形滾動進(jìn)度條動畫,想不會都難!那么,到底是什么東東呢?先不急,之前我分享了一個(gè)css實(shí)現(xiàn)進(jìn)度條效果的博客 《 CSS實(shí)現(xiàn)進(jìn)度條和訂單進(jìn)度條 》, 但是呢,那篇博客只是制作出來效果而已,并沒有動畫效果,因?yàn)楫?dāng)時(shí)正期末復(fù)習(xí)期間,所以就省了制作動畫的時(shí)間成本。所以,今天就一起把各種效果都實(shí)現(xiàn)吧!
先看一下效果圖,會提升我們的學(xué)習(xí)興趣喲:
好的,我將按照此圖從上到下的順序講解,由于第一和第二種效果之氣那篇博客《 CSS實(shí)現(xiàn)進(jìn)度條和訂單進(jìn)度條 》已經(jīng)介紹過怎么做的了,這里就把重心放在動畫上面, 對于圓形效果是重點(diǎn),我將詳細(xì)講解。
第一種效果:
html結(jié)構(gòu):
<div id="progress"> <span></span> </div>
css樣式:
#progress{ width: 50%; height: 30px; border:1px solid #ccc; border-radius: 15px; margin: 50px 0 0 100px; overflow: hidden; box-shadow: 0 0 5px 0px #ddd inset; } #progress span { display: inline-block; width: 100%; height: 100%; background: #2989d8; /* Old browsers */ background: -moz-linear-gradient(45deg, #2989d8 33%, #7db9e8 34%, #7db9e8 59%, #2989d8 60%); /* FF3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(33%,#2989d8), color-stop(34%,#7db9e8), color-stop(59%,#7db9e8), color-stop(60%,#2989d8)); /* Chrome,Safari4+ */ background: -webkit-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Chrome10+,Safari5.1+ */ background: -o-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* Opera 11.10+ */ background: -ms-linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* IE10+ */ background: linear-gradient(45deg, #2989d8 33%,#7db9e8 34%,#7db9e8 59%,#2989d8 60%); /* W3C */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2989d8', endColorstr='#2989d8',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ background-size: 60px 30px; text-align: center; color:#fff; -webkit-animation:load 3s ease-in; } @-webkit-keyframes load{ 0%{ width: 0%; } 100%{ width:100%; } }
可以看到其實(shí)這種進(jìn)度條的動畫是最容易實(shí)現(xiàn)的,根據(jù)具體進(jìn)度百分比設(shè)置默認(rèn)的width百分比和動畫里100%處的width百分比就行了,比如說,我想實(shí)現(xiàn)70%的進(jìn)度條動畫效果,那么我只需要修改一下兩處地方:
#progress span{ width: 70%; } @-webkit-keyframes load{ 0%{ width: 0%; } 100%{ width:70%; } }
第二種效果:
html結(jié)構(gòu):
<div id="progressBar"> <!-- 進(jìn)度條 --> <div> <span></span> </div> <!-- 五個(gè)圓 --> <span></span> <span></span> <span></span> <span></span> <span></span> </div>
css樣式:
#progressBar{ width: 80%; height: 50px; position: relative; margin: 50px 0 0 100px; } #progressBar div{ width: 100%; height: 10px; position: absolute; top:50%; left: 0; margin-top:-20px; background: #ccc; } #progressBar div span{ position: absolute; display: inline-block; background: green; height: 10px; width: 100%; -webkit-animation:bgLoad 5.5s linear; } @-webkit-keyframes bgLoad{ 0%{ width: 0%; } 18.18%,27.27%{ width:25%; } 45.45%,54.54%{ width: 50%; } 72.72%,81.81%{ width: 75%; } 100%{ width:100%; } } #progressBar>span{ position: absolute; top:0; margin-top: -10px; width: 40px; height: 40px; border-radius: 50%; background: #ccc; margin-left: -20px; color:#fff; } @-webkit-keyframes circleLoad_1{ 0%,66.66%{ background: #ccc; } 100%{ background:green; } } @-webkit-keyframes circleLoad_2{ 0%,83.34%{ background: #ccc; } 100%{ background:green; } } @-webkit-keyframes circleLoad_3{ 0%,88.88%{ background: #ccc; } 100%{ background:green; } } @-webkit-keyframes circleLoad_4{ 0%,91.67%{ background: #ccc; } 100%{ background:green; } } #progressBar span:nth-child(2){ left: 0%;background:green; } #progressBar span:nth-child(3){ left: 25%;background:green; -webkit-animation:circleLoad_1 1.5s ease-in; } #progressBar span:nth-child(4){ left: 50%;background:green; -webkit-animation:circleLoad_2 3s ease-in; } #progressBar span:nth-child(5){ left: 75%;background:green; -webkit-animation:circleLoad_3 4.5s ease-in; } #progressBar span:nth-child(6){ left: 100%;background:green; -webkit-animation:circleLoad_4 6s ease-in; }
可以看到,其實(shí)對于動畫本身是很簡單的,一看就明白了, 主要就是動畫持續(xù)時(shí)間的計(jì)算 ,由于這個(gè)動畫效果只執(zhí)行一次,所以其實(shí)也可以用動畫延遲時(shí)間來保證各個(gè)動畫在指定的時(shí)間點(diǎn)開始執(zhí)行,但是對于循環(huán)或者多次動畫效果,延遲很不靈活,所以這里還是用持續(xù)時(shí)間的長短來控制動畫的執(zhí)行時(shí)間。
這個(gè)訂單進(jìn)度條,我是設(shè)置了走一段用時(shí)1秒,然后每到一個(gè)圓點(diǎn)就停頓0.5秒,而這0.5秒就是相對應(yīng)的圓點(diǎn)的動畫持續(xù)執(zhí)行時(shí)間。但是 再次強(qiáng)調(diào)這個(gè)是單次動畫 ,如果想實(shí)現(xiàn)循環(huán)動畫,還是得做調(diào)整的,必須讓所有動畫的持續(xù)執(zhí)行時(shí)間是一樣的,不然循環(huán)起來就錯(cuò)亂的。而時(shí)間的改動也會影響動畫關(guān)鍵幀的改動, 下面對第一小段和第二個(gè)圓的動畫時(shí)間講解一下 :
首先,細(xì)長條的動畫持續(xù)時(shí)間通過計(jì)算:
4小段x1秒 + 中間3個(gè)圓點(diǎn) x 0.5秒 = 5.5秒
接下來就是計(jì)算細(xì)長條動畫關(guān)鍵幀的時(shí)間分配,設(shè)每一份0.5秒,那么共總就是11份,每小段得2份,每個(gè)圓點(diǎn)得1份,用100%除以11,可得每份大約是9.09%,接下來就是分配時(shí)間了,這個(gè)就簡單了,不多說。
接著,當(dāng)細(xì)長條完成第一小段的動畫效果到達(dá)第二個(gè)圓點(diǎn)時(shí),會停頓0.5秒,而這0.5秒就是第二個(gè)圓點(diǎn)的動畫時(shí)間,所以第二個(gè)圓點(diǎn)的動畫持續(xù)時(shí)間就是:
等待細(xì)長條執(zhí)行完1小段 x1秒+自身的動畫完成時(shí)間x0.5秒=1.5秒
同樣的方法計(jì)算每一份的時(shí)間然后進(jìn)行分配。 同理,其他動畫效果相似,就不再贅述了。
第三種效果:
今天就重點(diǎn)講解這個(gè)效果,首先,當(dāng)有人說你能不能做一個(gè)圓形進(jìn)度條效果出來時(shí),如果是靜態(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%; }
然后還是會說,這個(gè)也不難啦??墒牵绻皇莿偤枚际?5度的倍數(shù)呢?
OK,我們先設(shè)置一個(gè)200x200的方塊,然后我們在這里面完成我們的效果:
.circleProgress_wrapper{ width: 200px; height: 200px; margin: 50px auto; position: relative; border:1px solid #ddd; }
接下來我將在這個(gè)容器里再放兩個(gè)矩形,每個(gè)矩形都占一半:
<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; } .right{ right:0; } .left{ left:0; }
這里重點(diǎn)說一下.wrapper 的overflow:hidden; 起著關(guān)鍵性作用。這兩個(gè)矩形都設(shè)置了溢出隱藏,那么當(dāng)我們?nèi)バD(zhuǎn)矩形里面的圓形的時(shí)候,溢出部分就被隱藏掉了,這樣我們就可以達(dá)到我們想要的效果。
從html結(jié)構(gòu)也已看到,在左右矩形里面還會各自有一個(gè)圓形,先講一下右半圓:
.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; right:0; }
可以看到,效果已經(jīng)出來了,其實(shí)本來是一個(gè)半圓弧,但由于我們設(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)自己想要的角度就可以實(shí)現(xiàn)任意比例的進(jìn)度條。接下來把左半圓弧也實(shí)現(xiàn),變成一個(gè)全圓:
.leftcircle{ border-bottom:20px solid green; border-left:20px solid green; left:0; }
緊接著,就是讓它動起來,原理是這樣的, 先讓右半圓弧旋轉(zhuǎn)180度,再讓左半圓弧旋轉(zhuǎn)180度 ,這樣,兩個(gè)半圓弧由于先后都全部溢出而消失了,所以看起來就是進(jìn)度條再滾動的效果:
.rightcircle{ border-top:20px solid green; border-right:20px solid green; right: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)反向的效果:
.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)士清理垃圾時(shí)的類似效果,當(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; } .right{ right: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; right: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í)就是多了一些改變不同邊框顏色的動畫而已,這個(gè)就給大家自己去實(shí)踐吧! 主要還是利用兩個(gè)矩形來完成這么一個(gè)圓形進(jìn)度條效果,特別注意overflow這條規(guī)則,起著關(guān)鍵作用。