百度疫情
一个小东西，说实话让我写 没有产品特定的成果，我可能不会这么写，不过无心中看到了算是拓展下思路：
用暗藏的复选框作为二选一的标识，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 class="wr"> <label for="checkBox" class="label"></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; */}