发布网友 发布时间:2022-04-20 08:00
共2个回答
懂视网 时间:2022-04-20 21:48
最终效果如图:
模拟开关当然需要一个选项框,这里用到了复选框checkbox
点击开关按钮,则开启或关闭。原生的checkbox无法做到图示的效果,所以就需要额外的元素来表示图中的开关
而我们又要使用到checkbox的点击效果以及点击后是否选中(checked)的效果,所以checkbox不能隐藏,但可以用覆盖的方式
为了减少多余标签的使用,可以使用伪元素:before、:after ,标签结构为
开启WLAN
用: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; }
热心网友 时间:2022-04-20 18:56
首先,我们需要给手机安装“RE文件管理器”APK程序。通过利用此工具修改MIUI系统文件来开启“虚拟按键”操作。此工具需要有ROOT权限才能正常使用。