首页
所有分类
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中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
CSS3+Sprite实现僵尸行走动画特效源码
Jan 27 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
HTML5引入的新数组TypedArray介绍
Dec 24 HTML / CSS
html5 Canvas画图教程(8)—canvas里画曲线之bezierCurveTo方法
Jan 09 HTML / CSS
HTML5在a标签内放置块级元素示例代码
Aug 23 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
基于html5绘制圆形多角图案
Apr 21 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
Mar 20 HTML / CSS
html5 外链式实现加减乘除的代码
Sep 04 HTML / CSS
带你了解CSS基础知识,样式
Jul 21 HTML / CSS
解决flex布局中子项目尺寸不受flex-shrink限制
May 11 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
缓存机制(1) BufferPool(1) element-ui(1) 逻辑函数(1) pongo2(1) 复合索引(1) 模板引擎(1) http_stub_status_module(1) 数据合并(1) 连接查询(1)
You might like
PHP无限分类(树形类)
2013/09/28 PHP
php中unserialize返回false的解决方法
2014/09/22 PHP
php防止用户重复提交表单
2015/11/02 PHP
Laravel核心解读之异常处理的实践过程
2019/02/24 PHP
繁简字转换功能
2006/07/19 Javascript
js 效率组装字符串 StringBuffer
2009/12/23 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
基于jquery循环map功能的代码
2011/02/26 Javascript
Javascript弹出窗口的各种方法总结
2013/11/11 Javascript
jquery如何实现锚点链接之间的平滑滚动
2013/12/02 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
包含中国城市的javascript对象实例
2015/08/03 Javascript
jquery树形菜单效果的简单实例
2016/06/06 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
微信小程序判断页面是否从其他页面返回的实例代码
2019/07/03 Javascript
vue实现购物车功能（商品分类）
2020/04/20 Javascript
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
2020/06/01 Javascript
Vue-resource安装过程及使用方法解析
2020/07/21 Javascript
多线程爬虫批量下载pcgame图片url 保存为xml的实现代码
2013/01/17 Python
python生成日历实例解析
2014/08/21 Python
python正则表达式之对号入座篇
2018/07/24 Python
Python中文编码知识点
2019/02/18 Python
Flask框架实现的前端RSA加密与后端Python解密功能详解
2019/08/13 Python
45个非常奇妙的CSS3 特性应用示例
2012/01/01 HTML / CSS
HTML5 canvas 瀑布流文字效果的示例代码
2018/01/31 HTML / CSS
德国婴儿服装和婴儿用品购买网站：Baby Sweets
2019/12/08 全球购物
高中语文教学反思
2014/01/16 职场文书
三字经教学反思
2014/04/26 职场文书
2014年中秋节活动总结
2014/08/29 职场文书
2015年营业员工作总结
2015/04/23 职场文书
python 下划线的多种应用场景总结
2021/05/12 Python
CSS filter 有什么神奇用途
2021/05/25 HTML / CSS
Golang 并发下的问题定位及解决方案
2022/03/16 Golang
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers