html:<input type="checkbox" class="switch">
css:
.switch{
appearance: none; -webkit-appearance: none;
position: relative;
border-radius: 3rem; padding:0 .1rem;
width: 1.3rem; outline: none;border:none;
height: .6rem; background-color: #999;
transition:all 0.4s ease 0s;
}
.switch:checked{background-color: #2a80c8;}
.switch:checked::before {
content: "YES"; transform:translateX(.14rem);
}
.switch::before {
content: "NO"; position: absolute;
top:.1rem; left:0;
transform:translateX(.7rem);
line-height: .4rem;
font-size: .24rem;
font-weight: 600;
color: #fff;
white-space: nowrap;
overflow: hidden;
}
.switch::after{
position: absolute; top:.05rem; right:.1rem;
width: .5rem; transform:translateX(-.6rem);
height: .5rem;
content: "";
background-color: #fff;
border-radius: inherit;
transition: -webkit-transform 80ms;
transition: transform 80ms;
transition: transform 80ms,-webkit-transform 80ms;
}
.switch:checked::after{transform:translateX(0);}
网友评论