html用CSS做的进度条.docx
- 文档编号:24313432
- 上传时间:2023-05-26
- 格式:DOCX
- 页数:11
- 大小:16.83KB
html用CSS做的进度条.docx
《html用CSS做的进度条.docx》由会员分享,可在线阅读,更多相关《html用CSS做的进度条.docx(11页珍藏版)》请在冰豆网上搜索。
html用CSS做的进度条
封面
作者:
PanHongliang
仅供个人学习
DOCTYPEhtml>
body{
background:
#222url("data:
image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAMAAAC67D+PAAAAFVBMVEUqKiopKSkoKCgjIyMuLi4kJCQtLS0dJckpAAAAO0lEQVR42iXLAQoAUQhCQSvr/kfe910jHIikElsl5qVFa1iE5f0Pom/CNZdbNM6756lQ41NInMfuFPgAHVEAlGk4lvIAAAAASUVORK5CYII=");
font:
13px'trebuchetMS',Arial,Helvetica;
}
h2,p{
text-align:
center;
color:
#fafafa;
text-shadow:
01px0#111;
}
a{
color:
#777;
}
/*---------------------------*/
.progress-bar{
background-color:
#1a1a1a;
height:
25px;
padding:
5px;
width:
350px;
margin:
70px020px0;
-moz-border-radius:
5px;
-webkit-border-radius:
5px;
border-radius:
5px;
-moz-box-shadow:
01px5px#000inset,01px0#444;
-webkit-box-shadow:
01px5px#000inset,01px0#444;
box-shadow:
01px5px#000inset,01px0#444;
}
.progress-barspan{
display:
inline-block;
height:
100%;
background-color:
#777;
-moz-border-radius:
3px;
-webkit-border-radius:
3px;
border-radius:
3px;
-moz-box-shadow:
01px0rgba(255,255,255,.5)inset;
-webkit-box-shadow:
01px0rgba(255,255,255,.5)inset;
box-shadow:
01px0rgba(255,255,255,.5)inset;
-webkit-transition:
width.4sease-in-out;
-moz-transition:
width.4sease-in-out;
-ms-transition:
width.4sease-in-out;
-o-transition:
width.4sease-in-out;
transition:
width.4sease-in-out;
}
/*---------------------------*/
.bluespan{
background-color:
#34c2e3;
}
.orangespan{
background-color:
#fecf23;
background-image:
-webkit-gradient(linear,lefttop,leftbottom,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);
}
.greenspan{
background-color:
#a5df41;
background-image:
-webkit-gradient(linear,lefttop,leftbottom,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);
}
/*---------------------------*/
.stripesspan{
-webkit-background-size:
30px30px;
-moz-background-size:
30px30px;
background-size:
30px30px;
background-image:
-webkit-gradient(linear,lefttop,rightbottom,
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%,transparent25%,
transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,
transparent75%,transparent);
background-image:
-moz-linear-gradient(135deg,rgba(255,255,255,.15)25%,transparent25%,
transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,
transparent75%,transparent);
background-image:
-ms-linear-gradient(135deg,rgba(255,255,255,.15)25%,transparent25%,
transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,
transparent75%,transparent);
background-image:
-o-linear-gradient(135deg,rgba(255,255,255,.15)25%,transparent25%,
transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,
transparent75%,transparent);
background-image:
linear-gradient(135deg,rgba(255,255,255,.15)25%,transparent25%,
transparent50%,rgba(255,255,255,.15)50%,rgba(255,255,255,.15)75%,
transparent75%,transparent);
-webkit-animation:
animate-stripes3slinearinfinite;
-moz-animation:
animate-stripes3slinearinfinite;
}
@-webkit-keyframesanimate-stripes{
0%{background-position:
00;}100%{background-position:
60px0;}
}
@-moz-keyframesanimate-stripes{
0%{background-position:
00;}100%{background-position:
60px0;}
}
/*---------------------------*/
.shinespan{
position:
relative;
}
.shinespan:
:
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-shine2sease-outinfinite;
-moz-animation:
animate-shine2sease-outinfinite;
}
@-webkit-keyframesanimate-shine{
0%{opacity:
0;width:
0;}
50%{opacity:
.5;}
100%{opacity:
0;width:
95%;}
}
@-moz-keyframesanimate-shine{
0%{opacity:
0;width:
0;}
50%{opacity:
.5;}
100%{opacity:
0;width:
95%;}
}
/*---------------------------*/
.glowspan{
-moz-box-shadow:
05px5pxrgba(255,255,255,.7)inset,0-5px5pxrgba(255,255,255,.7)inset;
-webkit-box-shadow:
05px5pxrgba(255,255,255,.7)inset,0-5px5pxrgba(255,255,255,.7)inset;
box-shadow:
05px5pxrgba(255,255,255,.7)inset,0-5px5pxrgba(255,255,255,.7)inset;
-webkit-animation:
animate-glow1sease-outinfinite;
-moz-animation:
animate-glow1sease-outinfinite;
}
@-webkit-keyframesanimate-glow{
0%{-webkit-box-shadow:
05px5pxrgba(255,255,255,.7)inset,0-5px5pxrgba(255,255,255,.7)inset;}
50%{-webkit-box-shadow:
05px5pxrgba(255,255,255,.3)inset,0-5px5pxrgba(255,255,255,.3)inset;}
100%{-webkit-box-shadow:
05px5pxrgba(255,255,255,.7)inset,0-5px5pxrgba(255,255,255,.7)inset;}
}
@-moz-keyframesanimate-glow{
0%{-moz-box-shadow:
05px5pxrgba(255,255,255,.7)inset,0-5px5pxrgba(255,255,255,.7)inset;}
50%{-moz-box-shadow:
05px5pxrgba(255,255,255,.3)inset,0-5px5pxrgba(255,255,255,.3)inset;}
100%{-moz-box-shadow:
05px5pxrgba(255,255,255,.7)inset,0-5px5pxrgba(255,255,255,.7)inset;}
}
360px;margin: 0auto">时尚的CSS3进度条
40%">
Setaboveto:
65%">
Setaboveto:
55%">
Setaboveto:
$(document).ready(function(){ $('.quarter').click(function(){ $(this).parent().prev().children('span').css('width','25%'); }); $('.half').click(function(){ $(this).parent().prev().children('span').css('width','50%'); }); $('.three-quarters').click(function(){ $(this).parent().prev().children('span').css('width','75%'); }); $('.full').click(function(){ $(this).parent().prev().children('span').css('width','100%'); }); });