iOS开关按钮，纯CSS给你安排上了
iOS开关按钮，纯CSS给你安排上了
前言
今早搭完电梯出来信号不太好，切换飞行模式重启信号，发现iOS的「开关按钮」挺好玩的，顺便用纯CSS实现一番。
思路
外观
按钮，顾名思义就是可点击触发某些事件的组件。在HTML众多标签中可用<div>、<a>、<button>和<input>作为载体。
在四个常用标签中只有<a>和<input>存在鼠标触发事件的状态，因此只能从它俩中选择。
- 「a」：
:link、:visited、:hover、:active - 「input」：
:checked
<a>的HTML语义是「anchor」，代表超链接，提供的全部选择器用于捕获超链接的触发状态。
<input>的HTML语义是「input」，类型设置为radio或checkbox时代表选择表单，提供的选择器:checked用于捕获选择表单是否被选中。
很明显，按钮存在未点击和已点击两种状态，故选择<input>作为载体。
<input>的类型设置为radio或checkbox是存在差别的。radio表示单选，若是单个存在，点击选中后就无法再次点击取消选中。checkbox表示多选，若是单个存在，点击选中后还可再次点击取消选中。故选择类型为checkbox较为合适。
<input class="ios-switch" type="checkbox">从上述两张截图可抽象出iOS开关按钮具有以下属性的类，这个类可继承到内部细节中。
.btn {
border-radius: 31px;
width: 102px;
height: 62px;
background-color: #e9e9eb;
}iOS开关按钮是一个具有美感的组件，故把<input>丑陋的默认外观抹除，细节地方就按照截图自行设计。按钮内的圆点在鼠标悬浮时需出现手型光标，点击后移动定位且移动效果最好有过渡动画才不显得生硬。
.ios-switch {
position: relative;
appearance: none;
cursor: pointer;
transition: all 100ms;
@extend .btn;
}背景
笔者是一位天秤座男生，对细节特别抠，细心和负责是笔者在工作上得到肯定的标签。细心的同学可能会发现iOS开关按钮在打开过程中，其背景存在着细微的变化。
- 「明显变化」：背景色从灰色过渡到绿色
- 「细微变化」：灰色的背景区域快速缩小并显示绿色的背景区域
过渡动画的贝塞尔曲线可用https://cubic-bezier.com微调到你想要的效果。
为了不引入太多HTML标签，iOS开关按钮的背景使用伪元素::before代替。
.ios-switch {
&::before {
position: absolute;
content: "";
transition: all 300ms cubic-bezier(.45, 1, .4, 1);
@extend .btn;
}
}圆点
圆点不用多说，就是一个圆圆的点。为了让过渡动画更生动，给它加了一个刹车回弹的细微动画，物理术语叫做「惯性回弹」。
试想象一块大大的果冻，在运行过程中突然急刹，前面那部分果冻因为惯性会向前挤，由于内部的柔韧性和分子牵引又将其拉回来。
这个惯性回弹动画可用贝塞尔曲线实现。一行代码实现惯性回弹厉害不，当然你也可用在其他动画场景上。
.elem {
transition: all 300ms cubic-bezier(.4, .4, .25, 1.35);
}圆点的实现几乎没难度，只需加一个动画让其过渡起来更生动。贝塞尔曲线动画可参考其他专业文章学习，在此就不再叙述了。另外，稍加一个小阴影润色下，让其看起来更立体。
为了不引入太多HTML标签，iOS开关按钮的圆点使用伪元素::after代替。
.ios-switch {
&::after {
position: absolute;
left: 4px;
top: 4px;
border-radius: 27px;
width: 54px;
height: 54px;
background-color: #fff;
box-shadow: 1px 1px 5px rgba(#000, .3);
content: "";
transition: all 300ms cubic-bezier(.4, .4, .25, 1.35);
}
}过渡
这个思路是重中之重，按钮点击进入选中状态会触发:checked，在:checked下对::before和::after做文章即可。结合上述涉及到点击后的细节，完善其余属性即可。
.ios-switch {
&:checked {
background-color: #5eb662;
&::before {
transform: scale(0);
}
&::after {
transform: translateX(40px);
}
}
}效果
最终完成效果如下。非常贴切今天的主题：「iOS开关按钮，纯CSS给你安排上了」。
整体源码如下。
<input class="ios-switch" type="checkbox">.btn {
border-radius: 31px;
width: 102px;
height: 62px;
background-color: #e9e9eb;
}
.ios-switch {
position: relative;
appearance: none;
cursor: pointer;
transition: all 100ms;
@extend .btn;
&::before {
position: absolute;
content: "";
transition: all 300ms cubic-bezier(.45, 1, .4, 1);
@extend .btn;
}
&::after {
position: absolute;
left: 4px;
top: 4px;
border-radius: 27px;
width: 54px;
height: 54px;
background-color: #fff;
box-shadow: 1px 1px 5px rgba(#000, .3);
content: "";
transition: all 300ms cubic-bezier(.4, .4, .25, 1.35);
}
&:checked {
background-color: #5eb662;
&::before {
transform: scale(0);
}
&::after {
transform: translateX(40px);
}
}
}