css样式缩放
.service-tag {
span{
font-size: 18px;
color: #333333;
cursor: pointer;
display: inline-block;
&.active {
color: #0080FF;
font-weight: 700;
transform:scale(1.1);
}
}
.line {
display: inline-block;
padding: 0 18px;
}
.line+.line {
position: relative;
&::before {
content: '';
display: block;
width: 1px;
height: 18px;
position: absolute;
background-color: #999;
left: 0;
margin: auto;
top: 0;
bottom: 0;
}
}
.line:first-child{
padding-left: 4px;
}
}
html tab切换
<div class="service-tag">
<div class="line"><span class="active">服务场景</span></div>
<div class="line"><span>日常办公</span></div>
</div>
解决问题
- 在tab中间添加竖线,点击切换时不闪动
动图
css3缩放文字变大且不闪动
