css实现手机中开关(开关插件)
来源:互联网 发布:网络于洗白是什么意思 编辑:程序博客网 时间:2024/06/04 18:59
在很多设计图上,会有如下图开关或者单选,今天我就来讲讲如何用css去实现动态的开关。
html代码中,是很简单的
<input type="checkbox" id="1" class="checkbox"><label class="switch" for="1"></label>
下面是我们css代码
<style> .checkbox { display: none; } .switch { width: 50px; height: 31px; background: #56ACFE; border-radius: 20px; padding: 1px; box-sizing: border-box; display: inline-block; margin-top: 15px; } .switch:after { content: ''; box-shadow: 0 3px 8px 0 rgba(0,0,0,0.15), 0 1px 1px 0 rgba(0,0,0,0.16), 0 3px 1px 0 rgba(0,0,0,0.10); width: 28px; height: 28px; background: #fff; border-radius: 50%; display: block; margin-left: 1px; float: left; transition: all 0.5s; } .checkbox:checked+.switch:after { margin-left: 20px; } .checkbox:checked+.switch { background: #ccc; } </style>
就这样,就实现了这个设计图上和手机上经常出现的开关。
如果对你能有帮助的话,麻烦点赞,如果有意见或者建议的话,私信我哦!
我会继续努力积攒经验的,会给大家不定时分享基础知识点的*-*,关注我哦!
阅读全文
0 0
- css实现手机中开关(开关插件)
- css模拟手机滑动开关
- CSS实现iphone式开关
- Android中实现iPhone开关
- 纯css实现开关按钮(滑块)
- 几个开关效果的CSS实现
- 纯CSS实现IOS开关效果
- 纯css实现仿ios表单开关
- CSS利用checkbook实现开关按钮
- 开关
- 开关
- Android快捷开关实现 Wifi开关、蓝牙开关、GPS开关、同步开关、亮度设置开关
- bootstrap-switch(开关插件)
- css-动画开关
- CSS防IOS开关
- CSS创意开关
- WM手机开关GSM模块的代码(即飞行模式开关)
- Android网络相关(WiFi的开关,WiFi热点的开关,获取手机IP地址等)
- 使用cmd连接操作ftp服务器
- ceph log的实现
- weui手机端级联选择器,支持地区,日期,学校等
- 2017-10-20课堂代码
- Java多线程编程-(8)-多图深入分析ThreadLocal原理
- css实现手机中开关(开关插件)
- 【机器学习】线性模型总结
- java线程安全总结
- 使用std--fstream处理文件
- Listener 笔记
- JAVA集合类
- RxJava学习
- ActiveMQ(四):Spring ActiveMQ 整合
- IDEA在编辑时提示could not autowire