*新闻详情页*/>
本文详细介绍了用css3完成switch组件的方式,共享给大伙儿,实际以下:
根据表单的checkbox
实际效果图
基本原理
checkbox, 有两种情况, 没选定和选定, 入选中的情况下(:checked), 更改款式便可, 最先得消除访问器默认设置的款式, apperance: none, 本文编码只在chrome中运作, 假如必须写适配性编码, 给apperance和transition再加前缀就好
html编码
<input class='switch-component' type='checkbox'>
css编码
// switch组件 .switch-component { position: relative; width: 60px; height: 30px; background-color: #dadada; border-radius: 30px; border: none; outline: none; -webkit-appearance: none; transition: all .2s ease; } // 按钮 switch-component::after { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background-color: #fff; border-radius: 50%; transition: all .2s ease; } // checked情况时,情况色调更改 .switch-component:checked { background-color: #86c0fa; } // checked情况时,按钮部位更改 .switch-component:checked::after { left: 50%; }
以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 网站建设_创建网站_免费建站平台_智能建站_企业建网站 版权所有 (网站地图) 粤ICP备10235580号