之前做一个收集用户信息的表单页面需要使用进度条显示用户目前填写到了第几步，不得不说CSS3伪类真的很好用，加上CSS动画加载的效果，不需要js代码就可以实现,进度条是灰色还是亮色通过active类名控制，两个icon的是合成的CSS Sprite图片通过坐标位置显示，背景图下载链接：(https://img.haomeiwen.com/i13079544/9af1c6bf06398c8a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
下面是效果图：
代码如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.progress-bar{
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
margin: 100px auto;
width: 500px;
}
.progress-bar li{
position: relative;
text-align: center;
font-size: 0;
}
.progress-bar li .i-icon{
position: relative;
display: inline-block;
width: 27px;
height: 26px;
background-image: url("all-icon.png");
background-size: 54px 26px;
background-position: 0 0;
}
.progress-bar li.active .i-icon {
background-position: -27px 0;
}
.progress-bar li:not(:first-child){
margin-left: 235px;
}
.progress-bar li:first-child .i-icon:after{
position: absolute;
top: 10px;
left:27px;
content: '';
width: 496px;
height: 7px;
background-color: #dedede;
z-index: 0;
}
.progress-bar li:not(:first-child) .i-icon:after{
position: absolute;
top: 10px;
left: -236px;
content: '';
width: 236px;
height: 7px;
background-color: #dedede;
z-index: 1;
}
.progress-bar li:not(:first-child).active .i-icon:after{
background-color: #457bff;
animation:annimate 2s;
-webkit-animation:annimate 2s;
}
.progress-bar li span{
position: absolute;
display: inline-block;
width: 60px;
left: -16px;
bottom: -20px;
font-size: 14px;
color: #959595;
}
.progress-bar li.active span{
color: #457bff;
}
@keyframes annimate
{
from {
width: 0;
}
to {
width: 236px;
}
}
/* Safari and Chrome */
@-webkit-keyframes annimate
{
from {
width: 0;
}
to {
width: 236px;
}
}
</style>
</head>
<body>
<ul class="progress-bar">
<li class="active">
<i class="i-icon"></i>
<span>第一步</span>
</li>
<li class="active">
<i class="i-icon"></i>
<span>第二步</span>
</li>
<li>
<i class="i-icon"></i>
<span>第三步</span>
</li>
</ul>
</body>
</html>
原文作者技术博客：https://www.jianshu.com/u/ac4daaeecdfe
95后前端妹子一枚，爱阅读，爱交友，将工作中遇到的问题记录在这里，希望给每一个看到的你能带来一点帮助。
欢迎留言交流。
网友评论