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);
}
}
}
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 使用Java API操作zookeeper的acl权限
- 使用ZooKeeper提供的原生Java API操作ZooKeeper节点
- CountDownLatch类的使用
- Spring-如何给静态变量注入值
- ZooKeeper的伪分布式集群搭建以及真分布式集群搭建
- zookeeper权限acl与四字命令
- 微信公众号开发-素材/消息管理接口
- 微信开发的一些神坑
- Spring Boot集成ElasticSearch实现简单的增删查改接口
- Spring Cloud Zuul 综合使用
- Spring Cloud Hystrix - 服务容错
- 记一次内存溢出问题的排查、分析过程及解决思路
- Spring Cloud Sleuth + Zipkin 实现服务追踪
- Docker化你的SpringBoot项目
- 微信公众号开发者模式介绍及接入