2020_12_24
源码
最外层 checkbox, 是按钮的整体, inner 是ON下绿色框所占的区域, toggle 是能点击的 ON 和 OFF 区域.
设置 body 字体和背景色
设置按钮的背景色, 位置, 圆形边框, 上下边框颜色和厚度
设置 绿色底色区域 的上下左右位置, 以此确定宽度和高度, 注意, 这里没设宽度和高度, 默认是 auto
设置背景, 圆形边框, 阴影
设置 ON OFF 按钮大小, 位置, 颜色, 背景, 阴影, 顶部和底部边框样式, 设置按钮上的动画时间为 0.5s
设置 OFF 的样式,, 由上下左右的定位确定 宽和高, 设置背景, 圆形边框, <code>line-height</code> 用来设置字体垂直居中
设置 点击后按钮的字体, ON, 之所有没有写其他属性, 是因为其他属性都继承 <code>checkbox .inner .toggle:before</code>
当按钮被点击, 滑块右移, 并且更改背景色, 更改时间为 0.5s
首先获取到 inner 和 toggle, 一个背景色框, 一个圆形按钮
给按钮 toggle 注册点击事件, 点击 ON OFF 按钮才有效
当 inner 处于 active, 也就是 inner 元素包含 active 类, 那就移除, 如果不包含, 那就添加, 反正做一个相反的操作
当 inner 处于 active, toggle 会右移, inner 背景色会变换, 在 css中 设置
大功告成, 过程如下图
希望读者在看完后能提出意见, 点个赞, 鼓励一下, 我们一起进步. 加油 !!