纯CSS3代码实现switch滑动开关按钮效果


Posted in HTML / CSS onAugust 30, 2016

html结构

XML/HTML Code复制内容到剪贴板
  1. <div class="container">  
  2.         <div class="bg_con">  
  3.             <input id="checked_1" type="checkbox" class="switch" />  
  4.             <label for="checked_1"></label>  
  5.         </div>  
  6.     </div>  

css代码,:before负责颜色,:after是那个白色小圆点,切换时的过渡效果用css3的动画实现。

CSS Code复制内容到剪贴板
  1. .switch{   
  2.         display:none;   
  3.     }   
  4.     label{   
  5.         position:relative;   
  6.         displayblock;   
  7.         padding1px;   
  8.         border-radius: 24px;   
  9.         height22px;   
  10.         margin-bottom15px;   
  11.         background-color#eee;   
  12.         cursorpointer;   
  13.         vertical-aligntop;   
  14.         -webkit-user-select: none;   
  15.     }   
  16.     label:before{   
  17.         content'';   
  18.         displayblock;   
  19.         border-radius: 24px;   
  20.         height22px;   
  21.         background-colorwhite;   
  22.         -webkit-transform: scale(1, 1);   
  23.         -webkit-transition: all 0.3s ease;   
  24.     }   
  25.     label:after{   
  26.         content'';   
  27.         positionabsolute;   
  28.         top: 50%;     
  29.         left: 50%;     
  30.         margin-top: -11px;     
  31.         margin-left: -11px;   
  32.         width22px;   
  33.         height22px;   
  34.         border-radius: 22px;   
  35.         background-colorwhite;   
  36.         box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);   
  37.         -webkit-transform: translateX(-9px);   
  38.         -webkit-transition: all 0.3s ease;   
  39.     }   
  40.     .switch:checked~label:after{   
  41.         -webkit-transform: translateX(9px);   
  42.     }   
  43.     .switch:checked~label:before{   
  44.         background-color:green;   
  45.     }    

以上所述是小编给大家介绍的纯CSS3代码实现switch滑动开关按钮效果 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

HTML / CSS 相关文章推荐
CSS3结构性伪类选择器九种写法
Apr 18 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
css3选择器基本介绍
Dec 15 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
Feb 29 HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 HTML / CSS
html5 canvas 简单画板实现代码
Jan 05 HTML / CSS
HTML5之SVG 2D入门4—笔画与填充
Jan 30 HTML / CSS
详解canvas多边形(蜘蛛图)的画法示例
Jan 29 HTML / CSS
在canvas上实现元素图片镜像翻转动画效果的方法
Mar 20 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
HTML5 层的叠加的实现
Jul 07 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
CSS3实现跳动的动画效果
Sep 12 #HTML / CSS
利用CSS3的flexbox实现水平垂直居中与三列等高布局
Sep 12 #HTML / CSS
对CSS3选择器的研究(详解)
Sep 16 #HTML / CSS
利用CSS3实现炫酷的飞机起飞动画
Sep 17 #HTML / CSS
CSS3 3D制作实战案例分析
Sep 18 #HTML / CSS
CSS3中动画属性transform、transition和animation属性的区别
Sep 25 #HTML / CSS
利用CSS3实现毛玻璃效果示例源码
Sep 25 #HTML / CSS
You might like
整合了前面的PHP数据库连接类~~做成一个分页类!
2006/11/25 PHP
php数组函数序列之array_intersect() 返回两个或多个数组的交集数组
2011/11/10 PHP
php array_walk 对数组中的每个元素应用用户自定义函数详解
2016/11/18 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
6个DIV 135或246间隔一秒轮番显示效果
2010/07/24 Javascript
js鼠标滑过弹出层的定位IE6bug解决办法
2012/12/26 Javascript
javascript函数定义的几种区别小结
2014/01/06 Javascript
javascript编写实用的省市选择器
2015/02/12 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
2015/08/23 Javascript
javascript加减乘除的简单实例
2016/07/12 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
2017/03/25 Javascript
JavaScript实现数值自动增加动画
2017/12/28 Javascript
Node.js的Koa实现JWT用户认证方法
2018/05/05 Javascript
Bootstrap模态对话框中显示动态内容的方法
2018/08/10 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
JavaScript实现移动端拖动元素
2020/11/24 Javascript
Vue实现图书管理案例
2021/01/20 Vue.js
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
浅谈python 四种数值类型(int,long,float,complex)
2016/06/08 Python
Python使用zip合并相邻列表项的方法示例
2018/03/17 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
Python嵌套式数据结构实例浅析
2019/03/05 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
房屋出售协议书
2014/04/10 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
十八大宣传标语
2014/10/09 职场文书
2014司机年终工作总结
2014/12/05 职场文书
中班上学期个人总结
2015/02/12 职场文书
大学生实习证明
2015/06/16 职场文书
2015年学校政教工作总结
2015/07/20 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
golang 实现时间戳和时间的转化
2021/05/07 Golang
如何设置多台电脑共享打印机?多台电脑共享打印机的方法
2022/04/08 数码科技
服务器间如何实现文件共享
2022/05/20 Servers