MIUI选项框开关样式模拟

来源：动视网责编：小采时间：2020-11-27 15:38:17

MIUI选项框开关样式模拟

MIUI选项框开关样式模拟: 有IOS的开关模拟，当然也有MIUI的开关模拟看到设置选项里面的开关样式，突发奇想地来试试最终效果如图：实现过程 1. 选项框checkbox 模拟开关当然需要一个选项框，这里用到了复选框checkbox 2. 理解开关的过程点击开关按钮，则开启或关闭。

推荐度：

点击下载本文 文档为doc格式

导读MIUI选项框开关样式模拟: 有IOS的开关模拟，当然也有MIUI的开关模拟看到设置选项里面的开关样式，突发奇想地来试试最终效果如图：实现过程 1. 选项框checkbox 模拟开关当然需要一个选项框，这里用到了复选框checkbox 2. 理解开关的过程点击开关按钮，则开启或关闭。

最终效果如图：

实现过程

1. 选项框checkbox

模拟开关当然需要一个选项框，这里用到了复选框checkbox

2. 理解开关的过程

点击开关按钮，则开启或关闭。原生的checkbox无法做到图示的效果，所以就需要额外的元素来表示图中的开关

而我们又要使用到checkbox的点击效果以及点击后是否选中（checked）的效果，所以checkbox不能隐藏，但可以用覆盖的方式

为了减少多余标签的使用，可以使用伪元素:before、:after ，标签结构为

　　
 开启WLAN

3. 开关的实现

用:before伪元素作为开关背景层，用:after伪元素作为开关项（即那个小圆圈）

 .switch input:before {
 content: '';
 display: inline-block;
 position: relative;
 border-radius: 20px;
 border: 1px solid #ccccc6;
 box-shadow: 0 0 1px 1px #ececf3;
 background-color: #fff;
 cursor: pointer;
 }

 .switch input:after {
 content: '';
 position: absolute;
 width: 12px;
 height: 12px;
 top: 2px;
 left: 3px;
 border-radius: 50%;
 background-color: #ccccc6;
 transition: .2s left, .2s background-color;
 }

初始小圆圈在左侧，当开关状态为开启时，右移，并更新开启状态的背景色

 .switch input:checked:after {
 left: 15px;
 background-color: #36a6fa;
 transition: .2s left, .2s background-color;
 }

MIUI选项框开关样式模拟

推荐度：

点击下载本文 文档为doc格式

标签：开关选项样式

热门焦点

MIUI选项框开关样式模拟

MIUI选项框开关样式模拟

实现过程

1. 选项框checkbox

2. 理解开关的过程

3. 开关的实现

MIUI选项框开关样式模拟

最新推荐

猜你喜欢

热门推荐