時尚的CSS3進度條效果
發(fā)布時間：2012-02-22 10:32:50 作者：佚名 
我要評論
我要評論基于css3的進度條效果代碼，需要的朋友可以參考下
時尚的CSS3進度條先看效果圖，非常漂亮吧：
demo：http://demo.jb51.net/js/2012/css3-progress-bars/
英文原文：http://www.red-team-design.com/stylish-css3-progress-bars
HTML代碼：
HTML代碼比較簡單
復制代碼
代碼如下:<div class="progress-bar blue stripes">
<span style="width: 40%"></span>
</div>
1.progress-bar – 定義進度欄的常規(guī)樣式。
2.blue – 定義進度條的風格，這里是藍色的
3.stripes – 當前進度的動畫類型。
4 span – 填充進度條。內(nèi)聯(lián)設置的寬度，0%-100%，進度條的寬度。
CCS代碼：
復制代碼
代碼如下:.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;
}
添加顏色，進度條風格：
復制代碼
代碼如下:.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);
}
條紋樣式
復制代碼
代碼如下:.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;}
}
閃爍樣式：
復制代碼
代碼如下:.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ā)光樣式：
復制代碼
代碼如下:.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/
相關文章
這篇文章主要介紹了使用CSS3制作一個簡單的進度條(demo)的相關資料,需要的朋友可以參考下2017-05-23- 這篇文章主要給大家介紹了利用CSS3實現(xiàn)進度條的兩種姿勢，文中給出了詳細的示例代碼和圖文介紹，對大家具有一定的參考價值，需要的朋友們下面來一起看看吧。2017-03-21
HTML5+CSS3網(wǎng)頁加載進度條的實現(xiàn)，下載進度條的代碼實例
本篇文章主要介紹了HTML5+CSS3網(wǎng)頁加載進度條的實現(xiàn)，下載進度條的代碼實例，具有一定的參考價值，有興趣的可以了解一下。2016-12-30- 用CSS3的border-radius、box-shadow、transition、-moz-linear-gradient、-webkit-gradient等樣式就可以完成一個時尚進度條,這里我們來看幾個CSS3制作彩色進度條樣式的代碼2016-06-23
- 圓環(huán)形進度條制作的基本思想還是畫出基本的弧線圖形,然后CSS3中我們可以控制其旋轉(zhuǎn)來串聯(lián)基本圖形,制造出部分消失的效果,下面就來帶大家學習圖解CSS3制作圓環(huán)形進度條的實2016-05-26
- 下面小編就為大家分享一篇html5+css3進度條倒計時動畫特效代碼【推薦】。希望對大家有所幫助。一起跟隨小編過來看看吧2016-03-08
- 這篇文章主要介紹了可以隨進度顯示不同顏色的css3進度條，文章最后有下載地址,需要的朋友可以參考下2014-04-11
- 原理是通過大量的css3屬性來實現(xiàn)的，如：animation、transform、keyframes等等屬性，示例采用了結(jié)構(gòu)性偽類選擇符E:nth-child(n)，來進行對HTML元素的選擇以及控制輸出，感2013-08-19
- 進度條而且還是帶有閃亮，不可思議吧，看下效果圖，至于實現(xiàn)代碼，感興趣的前端設計者可以參考下哈，或許有所意想不到的收獲2013-04-17
純CSS3編寫的的精美動畫進度條(無flash/無圖像/無腳本/附源碼)
加載動畫和進度條的真正目的是讓用戶了解任務的進度，有很多的基于JavaScript的動畫，但我決定切換到CSS3,使用純CSS：沒有flash，沒有圖像，沒有腳本2013-01-07
