用纯css实现一个iOS的switch开关

2020-05-21

需求：

使用一个 div，不借助 js 能力的前提下，纯 css 实现一个类似如下图的效果：
iOS switch
hover上去的时候变化。

实现

印象中这道题在当年阿里校招的笔试上见过，但是很多年没写css了，很多知识点忘的差不多了，答得不算好。下面总结下：

.switch {
    position: relative;
    width: 100px;
    height: 30px;
    background: #3388ff;
    font-size: 0px;
    transition: 1s ease;
}
.switch:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: #eee;
    transition: 1s ease;
}
.switch:hover {
    background: #eee;
}
.switch:hover:before {
    background: #3388ff;
    /*注意这里要用left，因为transition是通过计算前面属性的变化做补间动画的。笔试的时候写成了right:0；导致滑块瞬移无动画。。*/
    left: 70px;
}

1	<div class="switch"></div>

关于transition这篇文章总结得不错，可以看看：
深入理解CSS过渡transition。

拓展

和checkbox结合实现点击动画

.switch {
    display: inline-block;
    font-size: 0;
}
.switch input {
    display: none;
}
.switch b {
    position: relative;
    display: inline-block;
    width: 100px;
    height: 30px;
    box-sizing: border-box;
    background: #3388ff;
    font-size: 0px;
    transition: 1s ease;
}
.switch b:before {
    content: "";
    position: absolute;
    display: inline-block;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    background: #eee;
}
.switch input:checked ~ b {
    background: #eee;
    padding-left: 70px;
}

.switch input:checked ~ b:before {
    background: #3388ff;
}

<label class="switch">
    <input type="checkbox" />
    <b></b>
</label>