css3时尚进度条

用css3的border-radius、box-shadow、transition、-moz-linear-gradient、-webkit-gradient等样式完成一个时尚进度条,不知道你信不信,不过我信了。

我在上一篇《用ps设计时尚进度条》和大家分享一下我用ps设计它的效果图,在今天这一篇里将和大家一块学习用css实现它。

一、制作静态的紫色条纹进度条

html代码:

<body>
<div class="progress-bar purple"> <span style="width:40%;"></span> </div>
</body>

css代码:

body {
	background-color:#333;
}
.progress-bar {
	background-color:#222;
	border-radius:3px;
	width:300px;
	height:24px;
	padding:5px;
	margin:50px;
	border-bottom:1px solid #444;
	box-shadow:inset 0 0 2px 0 #000;
}
.progress-bar span {
	display:inline-block;
	width:140px;
	height:24px;
        border-radius:2px;
	box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;
	-moz-box-shadow:0 1px 0 rgba(255, 255, 255, 0.5) inset;
	-webkit-box-shadow:rgba(255,255,255,0.5) 0 1px 0 inset;
}
.purple span{
	background-color:#F09;
	background-image:-moz-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%);
	background-image:-webkit-gradient(linear,0 100%,100% 0,color-stop(25%,rgba(255,255,255,0.3)),color-stop(25%,transparent),color-stop(50%,transparent),color-stop(50%,rgba(255,255,255,0.3)),color-stop(75%,rgba(255,255,255,0.3)),color-stop(75%,transparent));
	background-size:16px 16px;
}

这上面用到的知识在前面的文章里都有提到,有不太了解的,可以查看以前的文章:《css3制作斜纹背景一,mozilla内核用法》、《css3css3制作斜纹背景二:webkit内核》和《css3控制背景图大小background-size》。

最终效果如下图所示:

紫色条纹进度条

二、制作静态的蓝色进度条

html代码:

<div class="progress-bar orange"> <span style="width:60%;"></span> </div>

css代码:

.orange span{
	background-image:-webkit-gradient(linear,0% 0%,0% 100%,from(#fecd22),to(#fd9415));
	background-image:-moz-linear-gradient(-90deg,#fecd22,#fd9415);
}

这上面用到的基础知识有:《css3实现背景颜色线性渐变

最终效果如下图所示:

橙色进度条

 

三、制作静态的绿色进度条

html代码:

<div> <span style="width:80%;"></span> </div>

css代码:

.green span{
	background-color:#00ff24;
	box-shadow:rgba(255,255,255,0.7)0 5px 5px inser,rgba(255,255,255,0.7)0 -5px 5px inset;
	-webkit-box-shadow:rgba(255, 255, 255, 0.7) 0 5px 5px inset, rgba(255, 255, 255, 0.7) 0 -5px 5px inset;
	-moz-box-shadow:rgba(255, 255, 255, 0.7) 0 5px 5px inset, rgba(255, 255, 255, 0.7) 0 -5px 5px inset;
}

最终效果如下图所示:

绿色进度条

四、为紫色条纹添加动态效果

css代码:

.purple span:hover{
	-webkit-animation:animate-stripes 3s linear infinite;
	-moz-animation:3s linear 0s normal none infinite animate-stripes;
}
@-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;}
}

鼠标放上去之后,动态效果会出现。可参见demo:http://rainleaves.com/demo/progress_bar.html

我在这里讲的不太详细,因为能力有限,还有些地方不是很懂,暂且不多说了,有不了解的可以参考《web前端开发》上文章,原文地址:《时尚的CSS3进度条》。

 

马上分享给你的朋友吧~

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

*

您可以使用这些 HTML 标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>