时尚的CSS3进度条

  • A+
所属分类:DIV+CSS

时尚的CSS3进度条先看效果图,非常漂亮吧:

demo:http://www.css88.com/demo/css3-progress-bars/

英文原文:http://www.red-team-design.com/stylish-css3-progress-bars

HTML代码:
HTML代码比较简单

1
2
3

<div class="progress-bar blue stripes">
    <span style="width: 40%"></span>
</div>

    .progress-bar – 定义进度栏的常规样式。.blue – 定义进度条的风格,这里是蓝色的.stripes – 当前进度的动画类型。span – 填充进度条。内联设置的宽度,0%-100%,进度条的宽度。

CCS代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

.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;
}

添加颜色,进度条风格:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

.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);
}

条纹样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

.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;}
}

闪烁样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

.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%;}
}

发光样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

.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的浏览器下的表现:

  • 我的微信小程序
  • 长按二维码识别查看微信小程序
  • weinxin
  • 我的个人微信号
  • 长按识别加我个人微信号
  • weinxin

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: