CSS3制作百分比进度条
今天呢，博主给小伙伴们带来的 是使用CSS3制作百分比进度条！
主要是圆角，阴影，线性渐变的应用！
阴影的格式：
box-shadow: x y size（大小）增强（可选参数） color 阴影;
*/
/* box-shadow:inset 0 0 30px red;
如上所示：标注的超级清楚了，不再废话！
线性渐变的格式：
linear-gradient(yellow,pink);颜色1，颜色2，颜色3……制定方向to+top/right/left/bottom
这里可以使用 to+某个方向。。来实现定向的线性渐变！上边解释的也很清楚了！
好了。。。我们直接来贴下代码！
<!DOCTYPE html
>
<
html
lang=
"en"
>
<
head
>
<
meta
charset=
"UTF-8"
>
<
meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<
meta
http-equiv=
"X-UA-Compatible"
content=
"ie=edge"
>
<
title
>Document
</
title
>
<
style
>
body{
background:
pink;
}
.box{
width:
600px;
padding:
1px;
height:
12px;
background-color:
rgba(
0,
0,
0,
.3);
border-radius:
7px;
margin:
40px
auto;
box-shadow:
0
1px
0
red,
inset
0
2px
3px
rgba(
0,
0,
0,
0.4)
}
.bar{
min-width:
12px;
float:
left;
width:
0%;
height:
12px;
border-radius:
6px;
background-image:
linear-gradient(
rgba(
255,
255,
255,
.7),
rgba(
255,
255,
255,
.1)),
linear-gradient(to
right,
#4BB2B4,
#E1E870);
position:
relative;
transition:
.35s;
overflow:
hidden;
}
.bar:after{
content:
'';
position:
absolute;
width:
6px;
height:
6px;
right:
3px;
top:
3px;
border-radius:
50%;
box-shadow:
0
1px
0
rgba(
255,
255,
255,
.3),
inset
0
2px
3px
rgba(
0,
0,
0,
0.6);
background-color:
rgba(
0,
0,
0,
.1);
}
<
/
style
>
</
head
>
<
body
>
<
div
class=
"box"
>
<
div
class=
"bar"
id=
"bar"
></
div
>
</
div
>
<
script
>
var
oBar =
document.
getElementById(
'bar');
document.
onclick =
function(){
oBar.
style.
width =
oBar.
offsetWidth +
10 +
'px';
}
<
/
script
>
</
body
>
</
html
>
运行效果如下图所示：
扫描二维码关注公众号，回复：
1829005 查看本文章
这里呢，，博主用了点JS，，，，效果就是每次点击都可以向右移动10PX！好了今天的分享到这里就结束了！