直接上代码:
CSS:
.guide{
padding: 20px;
margin-bottom: 20px;
background: #fff;
}
.guide:after{
clear: both;
content: '';
display: block;
}
.guide .guide-item{
float: left;
text-align: center;
position: relative;
width: 33.33333%;
}
.guide .guide-item:after,
.guide .guide-item:before{
content: '';
display: block;
width: 50%;
height: 4px;
background: #f4f4f4;
position: absolute;
top: 10px;
}
.guide .guide-item:after{
right: 0;
}
.guide .guide-item:before{
left: 0;
}
.guide .guide-item:first-of-type:before{
display: none;
}
.guide .guide-item:last-of-type:after{
display: none;
}
.guide .guide-item.over span,
.guide .guide-item.on span,
.guide .guide-item.on:before,
.guide .guide-item.over:after,
.guide .guide-item.over:before{
background: #007aff;
color: #fff;
}
.guide .guide-item.on span{
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
-ms-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
.guide .guide-item span{
display: inline-block;
width: 24px;
height: 24px;
text-align: center;
line-height: 24px;
border-radius: 50%;
background: #f4f4f4;
font-weight: bold;
font-size: 16px;
position: relative;
z-index: 10;
}
.guide .guide-item p{
font-size: 12px;
color: #808080;
padding-top: 5px;
}
HTML:
<div class="guide">
<div class="guide-item over">
<span>1</span>
<p>身份认证</p>
</div>
<!-- /.guide-item -->
<div class="guide-item on">
<span>2</span>
<p>信息录入</p>
</div>
<!-- /.guide-item -->
<div class="guide-item">
<span>3</span>
<p>人脸录入</p>
</div>
<!-- /.guide-item -->
</div>
<!-- /.guide -->
更多详情
一到三万元的小本生意 https://zhuanlan.zhihu.com/p/157978996
不起眼的暴利小生意 https://zhuanlan.zhihu.com/p/148417881