* {
margin:0;
padding:0;
list-style:none;
}
.eStep-warp {
width:600px;
position:relative;
margin:0 auto;
margin-top:100px;
}
.eStep {
display:flex;
width:100%;
}
.eStep-item {
flex:1;
height:10px;
background:#e4e4e4;
position:relative;
}
i {
text-decoration:none;
font-style:normal;
font-size:13px;
}
.eStep-progress {
width:0;
height:8px;
position:absolute;
left:0;
top:0;
background:#BD1D18;
}
/*进度条结束*/
.eStep--point-warp {
position:absolute;
left:0;
top:0;
width:100%;
height:50px;
}
.eStep--point-item {
position:absolute;
top:-10px;
display:block;
height:50px;
}
.eStep--point {
display:block;
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
width:26px;
height:26px;
line-height:26px;
color:#fff;
text-align:center;
position:absolute;
top:0px;
left:-2px;
background:#e4e4e4;
border:3px solid #e4e4e4;
-webkit-border-radius:50%;
-moz-border-radius:50%;
border-radius:50%;
}
.eStep--point.done {
width:30px;
height:30px;
background:#BD1D18;
-webkit-transition:0.3s all ease;
-moz-transition:0.3s all ease;
-ms-transition:0.3s all ease;
-o-transition:0.3s all ease;
transition:0.3s all ease;
}
.eStep--point.done:hover {
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-ms-transform:scale(1.2);
-o-transform:scale(1.2);
transform:scale(1.2);
}
.eStep--text {
display:inline-block;
width:100%;
position:absolute;
bottom:0;
left:0;
text-align:left;
}
$('#step1').setStep(n); 可以将步骤跳到第几步