纯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制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3实现鼠标悬停显示扩展内容
Aug 24 HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
在HTML5 Canvas中放入图片和保存为图片的方法
May 03 HTML / CSS
深入浅析HTML5中的SVG
Nov 27 HTML / CSS
html5+css3进度条倒计时动画特效代码【推荐】
Mar 08 HTML / CSS
HTML5中使用postMessage实现两个网页间传递数据
Jun 22 HTML / CSS
详解移动端html5页面长按实现高亮全选文本内容的兼容解决方案
Dec 03 HTML / CSS
AmazeUI导航的示例代码
Aug 14 HTML / CSS
CSS3通过var()和calc()函数实现动画特效
Mar 30 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+mysql开源XNA 聚合程序发布 下载
2007/07/13 PHP
浅析application/x-www-form-urlencoded和multipart/form-data的区别
2014/06/22 PHP
Windows7下的php环境配置教程
2015/02/28 PHP
php跨服务器访问方法小结
2015/05/12 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
PHP利用Cookie设置用户30分钟未操作自动退出功能
2017/07/03 PHP
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
jQueryUI DatePicker 添加时分秒
2016/06/04 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
2016/11/21 Javascript
jQuery控制控件文本的长度的操作方法
2016/12/05 Javascript
canvas滤镜效果实现代码
2017/02/06 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
swiper在angularjs中使用循环轮播失效的解决方法
2018/09/27 Javascript
Angular父子组件通过服务传参的示例方法
2018/10/31 Javascript
vue-router的使用方法及含参数的配置方法
2018/11/13 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
Vue实现简单的留言板
2020/10/23 Javascript
详解Python多线程
2016/11/14 Python
pytorch 加载(.pth)格式的模型实例
2019/08/20 Python
python遍历文件目录、批量处理同类文件
2019/08/31 Python
python字符串替换re.sub()实例解析
2020/02/09 Python
python为Django项目上的每个应用程序创建不同的自定义404页面(最佳答案)
2020/03/09 Python
Python函数参数分类原理详解
2020/05/28 Python
解决margin 外边距合并问题
2019/07/03 HTML / CSS
澳大利亚在线购买葡萄酒:The Wine Collective
2020/02/20 全球购物
垃圾回收的优点和原理。并考虑2种回收机制
2016/10/16 面试题
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
继电保护工岗位职责
2014/01/05 职场文书
教师业务学习制度
2014/01/25 职场文书
工程招投标邀请书
2014/01/26 职场文书
理财学专业自荐书
2014/06/28 职场文书
任命书怎么写
2015/03/02 职场文书
MySQL query_cache_type 参数与使用详解
2021/07/01 MySQL