今早搭完电梯出来信号不太好,切换飞行模式重启信号,发现iOS的「开关按钮」挺好玩的,顺便用纯CSS实现一番。
外观
按钮,顾名思义就是可点击触发某些事件的组件。在HTML众多标签中可用<div>
、<a>
、<button>
和<input>
作为载体。
在四个常用标签中只有<a>
和<input>
存在鼠标触发事件的状态,因此只能从它俩中选择。
:link
、:visited
、:hover
、:active
: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);
}
}
}