首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 HTML / CSS

CSS3模拟IOS滑动开关效果

Posted in HTML / CSS onSeptember 28, 2016

前言

H5站点需要IOS滑动按钮的效果,想了想似乎CSS3能搞起,就折腾出来了...挺简单的..请看注释

效果

CSS3模拟IOS滑动开关效果

代码

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>  
  2. <html lang="en">  
  3.   
  4. <head>  
  5.     <meta charset="UTF-8">  
  6.     <title>CSS3模拟IOS开关</title>  
  7.     <style type="text/css" media="screen">  
  8.        /* ==========================================================================   
  9.                         设置根元素字体大小   
  10.        ========================================================================== */   
  11.         html {   
  12.             font-size: 100px;   
  13.         }   
  14.         /* ==========================================================================   
  15.                         设置模拟元素的包裹层,装饰...毫无卵用   
  16.        ========================================================================== */   
  17.        .ios-checkbox{   
  18.             height:4rem;   
  19.             width:4rem;   
  20.             position:absolute;   
  21.             left:50%;   
  22.             top:50%;   
  23.             -webkit-transform:translate(-50%, -50%);   
  24.                     transform:translate(-50%, -50%);   
  25.             border:.05rem dashed #3DB7A9;   
  26.             display:-webkit-box;   
  27.             display:-webkit-flex;   
  28.             display:-ms-flexbox;   
  29.             display:flex;   
  30.             -webkit-box-orient:horizontal;   
  31.             -webkit-box-direction:normal;   
  32.             -webkit-flex-direction:column;   
  33.                 -ms-flex-direction:column;   
  34.                     flex-direction:column;   
  35.             -webkit-flex-wrap:nowrap;   
  36.                 -ms-flex-wrap:nowrap;   
  37.                     flex-wrap:nowrap;   
  38.             -webkit-justify-content:space-around;   
  39.                 -ms-flex-pack:distribute;   
  40.                     justify-content:space-around;   
  41.             -webkit-box-align:center;   
  42.             -webkit-align-items:center;   
  43.                 -ms-flex-align:center;   
  44.                     align-items:center;   
  45.        }   
  46.         /* ==========================================================================   
  47.                     label标签模拟按钮            
  48.        ========================================================================== */   
  49.         .emulate-ios-button {   
  50.             display: block;   
  51.             width: 2rem;   
  52.             height: 1rem;   
  53.             background: #ccc;   
  54.             border-radius: 5rem;   
  55.             cursor: pointer;   
  56.             position: relative;   
  57.             -webkit-transition: all .3s ease;   
  58.             transition: all .3s ease;   
  59.         }   
  60.   
  61.         /* ==========================================================================   
  62.                     设置伪类,来实现模拟滑块滑动,过渡用了transition来实现 ,   
  63.                     translateZ来强制启用硬件渲染      
  64.        ========================================================================== */   
  65.   
  66.         .emulate-ios-button:after {   
  67.             content: '';   
  68.             display: block;   
  69.             width: .9rem;   
  70.             height: .9rem;   
  71.             border-radius: 100%;   
  72.             background: #fff;   
  73.             box-shadow: 0 1px 1px rgba(0, 0, 0, .1);   
  74.             position: absolute;   
  75.             left: .05rem;   
  76.             top: .05rem;   
  77.             -webkit-transform:translateZ(0);       
  78.             transform:translateZ(0);   
  79.             -webkit-transition: all .3s ease;     
  80.             transition: all .3s ease;   
  81.         }   
  82.   
  83.         .emulate-ios-button:active:after {   
  84.             width: 1.1rem;   
  85.         }   
  86.   
  87.       /* ==========================================================================   
  88.                     设置raw-checkbox,视觉直观比较    
  89.        ========================================================================== */   
  90.         .raw-checkbox{   
  91.             height:2rem;   
  92.             width:2rem;   
  93.         }   
  94.   
  95.         .raw-checkbox:checked+label {   
  96.             background: #34bf49;   
  97.         }   
  98.   
  99.         /* 这里是伪元素偏移,初始是0.9+0.05 ,所以这里1.05rem */   
  100.         .raw-checkbox:checked+label:after {   
  101.             left: 1.05rem;   
  102.         }   
  103.   
  104.         .raw-checkbox:checked+label:active:after {   
  105.             left: .5rem;   
  106.         }   
  107.   
  108.   
  109.         .raw-checkbox:disabled+label {   
  110.             background: #d5d5d5;   
  111.             pointer-events: none;   
  112.         }   
  113.   
  114.         .raw-checkbox:disabled+label:after {   
  115.             background: #bcbdbc;   
  116.         }   
  117.   
  118.     </style>  
  119. </head>  
  120.   
  121. <body>  
  122.     <div class="ios-checkbox">  
  123.         <input type="checkbox" id="ios-checkbox" name="emulate-ios-button" class="raw-checkbox">  
  124.         <label for="ios-checkbox" class="emulate-ios-button"></label>  
  125.     </div>  
  126. </body>  
  127.   
  128. </html>  
  129.   

总结

为了更直观的比较,raw checkbox我就没有隐藏了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

CSS3模拟IOS滑动开关效果

- Author -

crper

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 HTML / CSS
CSS3 清除浮动的方法示例
Jun 01 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
纯CSS3实现移动端展开和收起效果的示例代码
Apr 26 HTML / CSS
css3弹性盒子flex实现三栏布局的实现
Nov 12 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
5 个强大的HTML5 API 函数推荐
Nov 19 HTML / CSS
HTML5在手机端实现视频全屏展示方法
Nov 23 HTML / CSS
如何查看浏览器对html5的支持情况
Dec 15 HTML / CSS
css position fixed 左右双定位的实现代码
Apr 29 HTML / CSS
CSS3打造磨砂玻璃背景效果
Sep 28 #HTML / CSS
利用CSS3实现折角效果实例源码
Sep 28 #HTML / CSS
CSS3 animation实现简易幻灯片轮播特效
Sep 27 #HTML / CSS
CSS3实现复选框动画特效示例代码
Sep 27 #HTML / CSS
利用CSS3实现单选框动画特效示例代码
Sep 26 #HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 #HTML / CSS
css3 盒模型以及box-sizing属性全面了解
Sep 20 #HTML / CSS
PL660(1) 南麂列岛(1) 松下(1) S2000(3) 台湾(1) 根德(2) SRF-S83(1) 森海(1) MX500(1) SRF-S84(1)
You might like
全国FM电台频率大全 - 5 内蒙古自治区
2020/03/11 无线电
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
jQuery Validation实例代码 让验证变得如此容易
2010/10/18 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
jQuery渐变发光导航菜单的实例代码
2013/03/27 Javascript
将字符串中由空格隔开的每个单词首字母大写
2014/04/06 Javascript
js中confirm实现执行操作前弹出确认框的方法
2014/11/01 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
Angular学习笔记之集成三方UI框架、控件的示例
2018/03/23 Javascript
前端面试知识点目录一览
2019/04/15 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
vue结合el-upload实现腾讯云视频上传功能
2020/07/01 Javascript
[01:53]DOTA2超级联赛专访Zhou 五年职业青春成长
2013/05/29 DOTA
[01:19:46]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.21.mp4
2020/07/19 DOTA
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
Python实现类似jQuery使用中的链式调用的示例
2016/06/16 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
Python多线程原理与用法详解
2018/08/20 Python
python 循环读取txt文档 并转换成csv的方法
2018/10/26 Python
Django ORM多对多查询方法(自定义第三张表&amp;ManyToManyField)
2019/08/09 Python
详解Python中namedtuple的使用
2020/04/27 Python
python 制作简单的音乐播放器
2020/11/25 Python
FORZIERI福喜利中国官网：奢侈品购物梦工厂
2019/05/03 全球购物
联想英国官网：Lenovo英国
2019/07/17 全球购物
美国滑板店：Tactics
2020/11/08 全球购物
服装设计行业个人的自我评价
2013/12/20 职场文书
小学一年级评语大全
2014/04/22 职场文书
施工安全生产承诺书
2014/05/23 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
安全保证书
2015/01/16 职场文书