纯CSS3进度条制作-Pure CSS3 Progress Bar

骑猪看日落 2022-02-25 00:52 288阅读 0赞

1.效果分析

纯CSS3实现进度条的制作，效果如下图所示，详见----[demo][]\----

![20130506213916831][]

2.难点分析

圆角边框，内阴影，

渐变填充实现斜纹效果

斜纹动画

3.实现步骤

a.html架构

b.进度条母条.progressBar的实现

.progressBar{
    	margin: 50px auto;
    	padding: 5px;
    	width: 360px;
    	height: 20px;
    	background-color: #1a1a1a;
    	border-radius: 4px;
    	box-shadow: 0 1px 5px #000 inset;
    }

c.进度条字条span的实现

.progressBar span{
    	display: inline-block;
    	height: 100%;
    	width: 60%;
    	background-color: #777;
    	border-radius: 3px;
    	box-shadow: 0 1px 0 rgba(255,255,255,.5) inset;
    	transition:all .5s ease;
    	position: relative;
    	z-index: 1;
    }
    .progressBar:hover span{
    	width: 100%;
    	cursor: pointer;
    }

d.不同颜色的变化

.blue span{
    	background-color: #34c2e3;
    }
    .orange span{
    	background-color: #fecf23;
    	background-image: linear-gradient(top, #fecf23, #fd9215);
    }

e.斜条纹实现

.stripes span{
    	background-size: 30px 30px;
    	background-image: linear-gradient(45deg, 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);
    	animation: stripesAnimate 1s linear infinite;
    }
    @keyframes stripesAnimate{
    	0%{background-position:0 0;}
    	100%{background-position: 60px 0;}
    }
    .stripes:hover span{
    	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);
    }

完工，感谢 [w3cplus][]大漠，感谢 [www.red-team-design.com][]。

深入阅读：

》[css3-progress-bars][]

》[how-to-create-progress-bar-with-css3][]

》[Pure-CSS-Animated-Progress-Bar][]

》[30-css3-progress-bars-100-free-for-download][]

》[Very Beautiful CSS3 And JQuery progress bar][]

》[pure-css-progress-bar-with-javascript-for-animation][]

》[progress-bars][]

》[让人不得不爱的进度条设计][Link 1]

》[动态进度条及百分比显示][Link 2]

[demo]: http://gx.zptc.cn/whqet/progressBar/progressBar.html
[20130506213916831]: /images/20220225/7085b911f74949abb9124bdd12ef5b42.png
[w3cplus]: http://www.w3cplus.com/css3/stylish-css3-progress-bars
[www.red-team-design.com]: http://www.red-team-design.com/stylish-css3-progress-bars
[css3-progress-bars]: http://css-tricks.com/css3-progress-bars
[how-to-create-progress-bar-with-css3]: http://www.splashnology.com/article/how-to-create-progress-bar-with-css3/3370/
[Pure-CSS-Animated-Progress-Bar]: http://www.htmldrive.net/items/show/159/Pure-CSS-Animated-Progress-Bar
[30-css3-progress-bars-100-free-for-download]: http://www.webappers.com/2011/05/05/30-css3-progress-bars-100-free-for-download/
[Very Beautiful CSS3 And JQuery progress bar]: http://www.htmldrive.net/items/show/791/Very-Beautiful-CSS3-And-JQuery-progress-bar
[pure-css-progress-bar-with-javascript-for-animation]: http://www.webappers.com/2010/09/23/pure-css-progress-bar-with-javascript-for-animation/
[progress-bars]: http://lab.galengidman.com/progress-bars/
[Link 1]: http://www.jiawin.com/22-progress-bar/
[Link 2]: http://www.jiawin.com/css3-digital-progress-bar/