時(shí)尚的CSS3進(jìn)度條效果
發(fā)布時(shí)間：2012-02-22 10:32:50 作者：佚名 
我要評論
我要評論基于css3的進(jìn)度條效果代碼，需要的朋友可以參考下
時(shí)尚的CSS3進(jìn)度條先看效果圖，非常漂亮吧：
demo：http://demo.jb51.net/js/2012/css3-progress-bars/
英文原文：http://www.red-team-design.com/stylish-css3-progress-bars
HTML代碼：
HTML代碼比較簡單
復(fù)制代碼
代碼如下:<div class="progress-bar blue stripes">
<span style="width: 40%"></span>
</div>
1.progress-bar – 定義進(jìn)度欄的常規(guī)樣式。
2.blue – 定義進(jìn)度條的風(fēng)格，這里是藍(lán)色的
3.stripes – 當(dāng)前進(jìn)度的動(dòng)畫類型。
4 span – 填充進(jìn)度條。內(nèi)聯(lián)設(shè)置的寬度，0%-100%，進(jìn)度條的寬度。
CCS代碼：
復(fù)制代碼
代碼如下:.progress-bar {
background-color: #1a1a1a;
height: 25px;
padding: 5px;
width: 350px;
margin: 50px 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
-webkit-box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
box-shadow: 0 1px 5px #000 inset, 0 1px 0 #444;
}
.progress-bar span {
display: inline-block;
height: 25px;
width: 200px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
-webkit-transition: width .4s ease-in-out;
-moz-transition: width .4s ease-in-out;
-ms-transition: width .4s ease-in-out;
-o-transition: width .4s ease-in-out;
transition: width .4s ease-in-out;
}
添加顏色，進(jìn)度條風(fēng)格：
復(fù)制代碼
代碼如下:.blue span {
background-color: #34c2e3;
}
.orange span {
background-color: #fecf23;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fecf23), to(#fd9215));
background-image: -webkit-linear-gradient(top, #fecf23, #fd9215);
background-image: -moz-linear-gradient(top, #fecf23, #fd9215);
background-image: -ms-linear-gradient(top, #fecf23, #fd9215);
background-image: -o-linear-gradient(top, #fecf23, #fd9215);
background-image: linear-gradient(top, #fecf23, #fd9215);
}
.green span {
background-color: #a5df41;
background-image: -webkit-gradient(linear, left top, left bottom, from(#a5df41), to(#4ca916));
background-image: -webkit-linear-gradient(top, #a5df41, #4ca916);
background-image: -moz-linear-gradient(top, #a5df41, #4ca916);
background-image: -ms-linear-gradient(top, #a5df41, #4ca916);
background-image: -o-linear-gradient(top, #a5df41, #4ca916);
background-image: linear-gradient(top, #a5df41, #4ca916);
}
條紋樣式
復(fù)制代碼
代碼如下:.stripes span {
-webkit-background-size: 30px 30px;
-moz-background-size: 30px 30px;
background-size: 30px 30px;
background-image: -webkit-gradient(linear, left top, right bottom,
color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
to(transparent));
background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
transparent 75%, transparent);
-webkit-animation: animate-stripes 3s linear infinite;
-moz-animation: animate-stripes 3s linear infinite;
}
@-webkit-keyframes animate-stripes {
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
@-moz-keyframes animate-stripes {
0% {background-position: 0 0;} 100% {background-position: 60px 0;}
}
閃爍樣式：
復(fù)制代碼
代碼如下:.shine span {
position: relative;
}
.shine span::after {
content: '';
opacity: 0;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: #fff;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-animation: animate-shine 2s ease-out infinite;
-moz-animation: animate-shine 2s ease-out infinite;
}
@-webkit-keyframes animate-shine {
0% {opacity: 0; width: 0;}
50% {opacity: .5;}
100% {opacity: 0; width: 95%;}
}
@-moz-keyframes animate-shine {
0% {opacity: 0; width: 0;}
50% {opacity: .5;}
100% {opacity: 0; width: 95%;}
}
發(fā)光樣式：
復(fù)制代碼
代碼如下:.glow span {
-moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
-webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;
-webkit-animation: animate-glow 1s ease-out infinite;
-moz-animation: animate-glow 1s ease-out infinite;
}
@-webkit-keyframes animate-glow {
0% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
50% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
100% { -webkit-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
}
@-moz-keyframes animate-glow {
0% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
50% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .3) inset, 0 -5px 5px rgba(255, 255, 255, .3) inset;}
100% { -moz-box-shadow: 0 5px 5px rgba(255, 255, 255, .7) inset, 0 -5px 5px rgba(255, 255, 255, .7) inset;}
}
在不支持css3的瀏覽器下的表現(xiàn)：
demo：http://demo.jb51.net/js/2012/css3-progress-bars/
相關(guān)文章
使用CSS3制作一個(gè)簡單的進(jìn)度條(demo)
這篇文章主要介紹了使用CSS3制作一個(gè)簡單的進(jìn)度條(demo)的相關(guān)資料,需要的朋友可以參考下2017-05-23利用CSS3實(shí)現(xiàn)進(jìn)度條的兩種姿勢詳解
這篇文章主要給大家介紹了利用CSS3實(shí)現(xiàn)進(jìn)度條的兩種姿勢，文中給出了詳細(xì)的示例代碼和圖文介紹，對大家具有一定的參考價(jià)值，需要的朋友們下面來一起看看吧。2017-03-21
HTML5+CSS3網(wǎng)頁加載進(jìn)度條的實(shí)現(xiàn)，下載進(jìn)度條的代碼實(shí)例
本篇文章主要介紹了HTML5+CSS3網(wǎng)頁加載進(jìn)度條的實(shí)現(xiàn)，下載進(jìn)度條的代碼實(shí)例，具有一定的參考價(jià)值，有興趣的可以了解一下。2016-12-30- 用CSS3的border-radius、box-shadow、transition、-moz-linear-gradient、-webkit-gradient等樣式就可以完成一個(gè)時(shí)尚進(jìn)度條,這里我們來看幾個(gè)CSS3制作彩色進(jìn)度條樣式的代碼2016-06-23
圖解CSS3制作圓環(huán)形進(jìn)度條的實(shí)例教程
圓環(huán)形進(jìn)度條制作的基本思想還是畫出基本的弧線圖形,然后CSS3中我們可以控制其旋轉(zhuǎn)來串聯(lián)基本圖形,制造出部分消失的效果,下面就來帶大家學(xué)習(xí)圖解CSS3制作圓環(huán)形進(jìn)度條的實(shí)2016-05-26html5+css3進(jìn)度條倒計(jì)時(shí)動(dòng)畫特效代碼【推薦】
下面小編就為大家分享一篇html5+css3進(jìn)度條倒計(jì)時(shí)動(dòng)畫特效代碼【推薦】。希望對大家有所幫助。一起跟隨小編過來看看吧2016-03-08可以隨進(jìn)度顯示不同顏色的css3進(jìn)度條分享
這篇文章主要介紹了可以隨進(jìn)度顯示不同顏色的css3進(jìn)度條，文章最后有下載地址,需要的朋友可以參考下2014-04-11CSS3實(shí)現(xiàn)的閃爍跳躍進(jìn)度條示例(附源碼)
原理是通過大量的css3屬性來實(shí)現(xiàn)的，如：animation、transform、keyframes等等屬性，示例采用了結(jié)構(gòu)性偽類選擇符E:nth-child(n)，來進(jìn)行對HTML元素的選擇以及控制輸出，感2013-08-19css3閃亮進(jìn)度條效果實(shí)現(xiàn)思路及代碼
進(jìn)度條而且還是帶有閃亮，不可思議吧，看下效果圖，至于實(shí)現(xiàn)代碼，感興趣的前端設(shè)計(jì)者可以參考下哈，或許有所意想不到的收獲2013-04-17純CSS3編寫的的精美動(dòng)畫進(jìn)度條(無flash/無圖像/無腳本/附源碼)
加載動(dòng)畫和進(jìn)度條的真正目的是讓用戶了解任務(wù)的進(jìn)度，有很多的基于JavaScript的動(dòng)畫，但我決定切換到CSS3,使用純CSS：沒有flash，沒有圖像，沒有腳本2013-01-07
