|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
CSS3實現(xiàn)訂單/進程/步驟進度條【演示/源碼下載】
作者:admin 時間:2022-3-18 10:17:2 瀏覽:本文介紹一款用CSS3實現(xiàn)的訂單/步驟進度條，這個案例的使用是比較廣泛的，很多知名網(wǎng)站都用到它。
案例介紹
1、該訂單一共有5個步驟，用5個圓表示。灰色表示未完成的步驟，綠色表示已完成的步驟。
2、未完成的步驟之間區(qū)域也用灰色填充。
3、當(dāng)完成某一步驟時，其對應(yīng)的圓，以及前面所有已經(jīng)完成的步驟對應(yīng)的圓，變成綠色。
4、已完成的步驟之間區(qū)域用綠色填充。
案例代碼
HTML結(jié)構(gòu)
<div id="progressBar">
<!-- 進度條 -->
<div>
<span></span>
</div>
<!-- 五個圓 -->
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
div+span標(biāo)簽是進度條，即是圓與圓之間的區(qū)域。
span標(biāo)簽，是表示一個圓。5個span標(biāo)簽就表示有5個圓。
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;
border:1px solid #ddd;
background: #ccc;
}
#progressBar div span{
position: absolute;
display: inline-block;
background: green;
height: 10px;
/* 變綠寬度 */
width: 75%;
/* 變綠寬度-動畫 */
-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:2px solid #ddd;
border-radius: 50%;
background: green;
margin-left: -20px;
color:#fff;
}
#progressBar>span:nth-child(1){
left: 0%;
}
#progressBar>span:nth-child(2){
left: 25%;
background:green;
}
#progressBar>span:nth-child(3){
left: 50%;
background:green;
}
#progressBar>span:nth-child(4){
left: 75%;
background:green;
}
#progressBar>span:nth-child(5){
left: 100%;
background:#ccc;
}代碼解釋
這里著重介紹CSS 3段關(guān)鍵代碼，每完成一個步驟，這幾段代碼都需要有一點改動。分別是：
1、#progressBar div span{}
這是定義進度條的寬度，如本例子width: 75%;就表示已經(jīng)完成了3/4個步驟。這個階段應(yīng)該是前面4個圓都變成綠色。
2、@-webkit-keyframes bgLoad{}
這是進度條動畫顯示。只保留已完成步驟的百分比的代碼就可以了。
3、#progressBar>span:nth-child(n){}
這是圓的顏色設(shè)置，我們要把已完成步驟的顏色設(shè)置為綠色(background:green;)，未完成步驟顏色設(shè)置為灰色(background:#ccc;)
總結(jié)
本文介紹了如何用CSS3實現(xiàn)訂單/步驟進度條，代碼簡單清晰，修改容易。純CSS，無需用到任何JS代碼，拷貝過去就能使用，相當(dāng)方便。
您可能對以下文章也感興趣
- 站長推薦
