CSS3制作圓形滾動進(jìn)度條動畫的示例
我要評論主 題
今天手把手教大家用CSS3制作圓形滾動進(jìn)度條動畫，想不會都難！那么，到底是什么東東呢？先不急，之前我分享了一個css實(shí)現(xiàn)進(jìn)度條效果的博客《CSS實(shí)現(xiàn)進(jìn)度條和訂單進(jìn)度條》，但是呢，那篇博客只是制作出來效果而已，并沒有動畫效果，因?yàn)楫?dāng)時正期末復(fù)習(xí)期間，所以就省了制作動畫的時間成本。所以，今天就一起把各種效果都實(shí)現(xiàn)吧！
內(nèi) 容
先看一下效果圖，會提升我們的學(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>
<!-- 五個圓 -->
<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ù)時間的計算，由于這個動畫效果只執(zhí)行一次，所以其實(shí)也可以用動畫延遲時間來保證各個動畫在指定的時間點(diǎn)開始執(zhí)行，但是對于循環(huán)或者多次動畫效果，延遲很不靈活，所以這里還是用持續(xù)時間的長短來控制動畫的執(zhí)行時間。
這個訂單進(jìn)度條，我是設(shè)置了走一段用時1秒，然后每到一個圓點(diǎn)就停頓0.5秒，而這0.5秒就是相對應(yīng)的圓點(diǎn)的動畫持續(xù)執(zhí)行時間。但是再次強(qiáng)調(diào)這個是單次動畫，如果想實(shí)現(xiàn)循環(huán)動畫，還是得做調(diào)整的，必須讓所有動畫的持續(xù)執(zhí)行時間是一樣的，不然循環(huán)起來就錯亂的。而時間的改動也會影響動畫關(guān)鍵幀的改動，下面對第一小段和第二個圓的動畫時間講解一下：
首先，細(xì)長條的動畫持續(xù)時間通過計算：
4小段x1秒 + 中間3個圓點(diǎn) x 0.5秒 = 5.5秒
接下來就是計算細(xì)長條動畫關(guān)鍵幀的時間分配，設(shè)每一份0.5秒，那么共總就是11份，每小段得2份，每個圓點(diǎn)得1份，用100%除以11，可得每份大約是9.09%，接下來就是分配時間了，這個就簡單了，不多說。
接著，當(dāng)細(xì)長條完成第一小段的動畫效果到達(dá)第二個圓點(diǎn)時，會停頓0.5秒，而這0.5秒就是第二個圓點(diǎn)的動畫時間，所以第二個圓點(diǎn)的動畫持續(xù)時間就是：
等待細(xì)長條執(zhí)行完1小段 x１秒＋自身的動畫完成時間ｘ０.５秒＝１.５秒
同樣的方法計算每一份的時間然后進(jìn)行分配。同理，其他動畫效果相似，就不再贅述了。
第三種效果：
今天就重點(diǎ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;
}
.right{
right:0;
}
.left{
left:0;
}
這里重點(diǎn)說一下.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;
right:0;
}
可以看到，效果已經(jīng)出來了，其實(shí)本來是一個半圓弧，但由于我們設(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)，變成一個全圓：
.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;
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)士清理垃圾時的類似效果，當(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í)就是多了一些改變不同邊框顏色的動畫而已，這個就給大家自己去實(shí)踐吧！主要還是利用兩個矩形來完成這么一個圓形進(jìn)度條效果，特別注意overflow這條規(guī)則，起著關(guān)鍵作用。
以上就是CSS3制作圓形滾動進(jìn)度條動畫的示例的詳細(xì)內(nèi)容，更多關(guān)于css3制作進(jìn)度條的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
- 這篇文章主要介紹了純css3實(shí)現(xiàn)橫向無限滾動的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)2020-11-06
css實(shí)現(xiàn)隱藏滾動條并可以滾動內(nèi)容的實(shí)例代碼
這篇文章主要介紹了css實(shí)現(xiàn)隱藏滾動條并可以滾動內(nèi)容的實(shí)例代碼,代碼簡單易懂，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-11-03
CSS3實(shí)現(xiàn)3D小球滾動撞擊遮擋板特效源碼
3D小球滾動撞擊遮擋板特效是一款基于css3繪制的3D立體的遮擋板，小球撞擊來回滾動特效，感興趣的朋友快來下載體驗(yàn)吧2020-09-21- 這篇文章主要介紹了Css3實(shí)現(xiàn)無縫滾動防抖的方法，幫助大家解決圖片抖動，感興趣的朋友可以了解下2020-09-14
- 這篇文章主要介紹了css文字陰影漸漸模糊效果的實(shí)現(xiàn),本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-07
css3懸停按鈕-CSS3鼠標(biāo)懸停按鈕陰影縮放特效代碼
CSS3鼠標(biāo)懸停按鈕陰影縮放特效代碼是一款紅色簡潔的方形按鈕，鼠標(biāo)懸停按鈕突出放大陰影效果，非常漂亮。2020-11-18
這篇文章主要介紹了使用純 CSS 實(shí)現(xiàn)滾動陰影效果,本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2021-01-04
