百度疫情tab
码农天地 -
百度疫情
一个小东西，说实话让我写 没有产品特定的效果，我可能不会这么写，不过无意中看到了算是拓展下思路：
用隐藏的复选框作为二选一的标识，label包裹，充分利用伪元素，减少标签渲染，before白色块作为主要动画元素，after做瞬变无动画，包裹当前活跃标签，left控制偏移，content修改标签内容
html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<input type="checkbox" id="checkBox">
<div >
<label for="checkBox" ></label>
</div>
</body>
</html>css:
label::before {
position:absolute;
left: 0;
top: 0;
z-index:3;
content: '现有确诊';
display: flex;
width: 50%;
height: 41px;
background-color: #fff;
justify-content:center;
align-items: center;
transition: all .2s ease;
font-weight: 700;
box-sizing: border-box;
}
label::after {
position:absolute;
left: 50%;
top: 0;
content: '累计确诊';
display: flex;
width: 50%;
height: 45px;
justify-content:center;
align-items: center;
/* transition: all .2s ease; */
}
label {
position: relative;
display:block;
/* width: 1 */
height: 100%;
box-sizing: border-box;
}
.wr {
width: 400px;
height: 45px;
padding: 2px;
box-sizing: border-box;
background-color: #dfdfdf;
/* transition: all .2s; */
}
#checkBox {
display: none;
}
#checkBox:checked+.wr>.label::after {
left: 0;
content: '现有确诊';
/* transition: all .2s; */
}
#checkBox:checked+.wr>.label::before {
left: 50%;
content: '累计确诊';
/* transition: all .2s; */
}
特别申明：本文内容来源网络，版权归原作者所有，如有侵权请立即与我们联系（cy198701067573@163.com），我们将及时处理。
Tags 标签
加个好友，技术交流
