📝一下
<input type="checkbox" id="switch-btn" />
<label for="switch-btn" class="switch-label"></label>
/* checkbox隐藏 */
#switch-btn {
display: none;
}
.switch-label {
height: 15px;
width: 15px;
cursor: pointer;
position: absolute;
}
.switch-label::before,
.switch-label::after {
content: "";
width: 100%;
height: 20%;
position: absolute;
right: 18px;
background: #fe6b57;
/* 先过渡transform,执行0.3s,再过0.3s过渡top,也执行0.3s */
transition: transform 0.3s ease-in-out, top 0.3s ease-in-out 0.3s;
}
/* 两条线设置不一样的高度 */
.switch-label::before {
top: 140%;
}
.switch-label::after {
top: 180%;
}
/* 点击的时候两条平行线变成x */
#switch-btn:checked ~ .switch-label::before {
top: 160%;
transform: rotate(-45deg);
transition: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s;
}
#switch-btn:checked ~ .switch-label::after {
top: 160%;
transform: rotate(45deg);
transition: top 0.3s ease-in-out, transform 0.3s ease-in-out 0.3s;
}