css3  iphone开关  移动端开关、按钮、input

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>hello world</title>

   <style>

		*{margin:0;padding:0;box-sizing:border-box;}

		.pub_switch_box{font-size: 0;display: inline-block;}

		.pub_switch { display: none;}

		.pub_switch + label {display: inline-block;position: relative;width: 56px;height: 26px;background-color: #fafbfa;border-radius: 50px;-webkit-transition: all 0.1s ease-in;transition: all 0.1s ease-in;}

		.pub_switch  + label:after {content: ' ';position: absolute;top: 0;width: 100%;height: 100%;-webkit-transition: box-shadow 0.1s ease-in;transition: box-shadow 0.1s ease-in;left: 0;border-radius: 100px;box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0,0,0,0.4);}

		.pub_switch  + label:before {content: ' ';position: absolute;top: 0px;left: 1px;z-index: 999999;width: 26px;height:26px;-webkit-transition: all 0.1s ease-in;transition: all 0.1s ease-in;border-radius: 100px;box-shadow: 0 3px 1px rgba(0,0,0,0.05), 0 0px 1px rgba(0,0,0,0.3);background: white;}

		.pub_switch:active + label:after {box-shadow: inset 0 0 0 20px #eee, 0 0 1px #eee;}

		.pub_switch:active + label:before {width: 37px;}

		.pub_switch:checked:active + label:before {width: 37px;left: 20px;}

		.pub_switch  + label:active {box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);}

		.pub_switch:checked + label:before {content: ' ';position: absolute;left: 31px;border-radius: 100px;}

		.pub_switch:checked + label:after {content: ' ';font-size: 1.5em;position: absolute;background: #4cda60;box-shadow: 0 0 1px #4cda60;}

   </style>

</head>

<body>

	<div class="pub_switch_box">

		<input type="checkbox" id="pub_switch_a1" class="pub_switch" />

		<label for="pub_switch_a1"></label>

		<input type="checkbox" id="pub_switch_a2" class="pub_switch" checked />

		<label for="pub_switch_a2"></label>

	</div>

</body>

</html>

　　

css3 iphone开关 移动端开关、按钮、input的更多相关文章

  1. 5个基于css3超炫的鼠标滑动按钮动画

    今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

  2. POJ - 1830：开关问题 （开关问题-高斯消元-自由元）

    pro:有N个相同的开关,每个开关都与某些开关有着联系,每当你打开或者关闭某个开关的时候,其他的与此开关相关联的开关也会相应地发生变化,即这些相联系的开关的状态如果原来为开就变为关,如果为关就变为开. ...

  3. 纯css3实现的圆形旋转分享按钮

    之前已经为大家介绍了好几款css3按钮,今天要为大家介绍的是一款纯css3实现的圆形旋转分享按钮.旋转的角度可以自己调整.在demo中演示了三个角度旋转.360度,60度,-360度.如图: 在线预览 ...

  4. 一款基于css3的简单的鼠标悬停按钮

    今天给大家分享一款基于css3的简单的鼠标悬停按钮.这款悬停按钮鼠标经过前边框是间断的.当鼠标经过的时候边框间隔消失.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  5. 一款基于jquery和css3实现的摩天轮式分享按钮

    之前分享了很多css3实现的按钮.今天要给大家带来一款基于jquery和css3实现的摩天轮式分享按钮.这款分享按钮页面底部有一个toggle按钮,单击该按钮,摩天轮按钮以动画的形式出现,各个分享按钮 ...

  6. 纯css3实现的鼠标悬停动画按钮

    今天给大家带来一款纯css3实现的鼠标悬停动画按钮.这款按钮鼠标经过前以正方形的形式,当鼠标经过的时候以动画的形式变成圆形.效果图如下: 在线预览   源码下载 实现的代码. html代码: < ...

  7. 移动端去掉按钮button默认样式

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  8. 一、H5(移动端)前端使用input type=file 上传图片，调用相机和相册

    一.H5(移动端)前端使用input type=file 上传图片,调用相机和相册

  9. css3 移动端 开关效果

    展示效果: 首先是html <div class="container"> <div class="bg_con"> <input ...

随机推荐

  1. openstack kvm 虚拟机磁盘差异衍生

    1, openstack虚拟实例备份之--多镜像格式多镜像文件合并为一个镜像文件衍生-差异镜像文件    /var/lib/nova/instances/b0abc22f-1a73-4079-b1bc ...

  2. JavaScript 各种遍历方式详解

    为了方便例子讲解,现有数组和json对象如下 var demoArr = ['Javascript', 'Gulp', 'CSS3', 'Grunt', 'jQuery', 'angular']; v ...

  3. Linux程序设计（二）shell程序设计

    1. 管道和重定向 文件描述符0:一个程序的标准输入 文件描述符1:标准输出 文件描述符2:标准错误输出 >操作符:把标准输出重定向到一个文件. >>操作符:将输出内容附加到一个文件 ...

  4. Android studio开发常用快捷键

    最常用快捷键 1.Ctrl+E  可以显示最近编辑的文件列表 2.Shift+Click(点击)  可以关闭文件 3.Ctrl+[或者ctrl+]  可以跳到大括号的开头结尾 4.Ctrl+Shift ...

  5. linux运维安全工具集合[持续更新中..]

    lynis 安全漏洞检测工具    https://cisofy.com/download/lynis/    https://cisofy.com/files/lynis-2.2.0.tar.gz ...

  6. JDBC——事物管理

    案例:银行转账问题,数据库如下 相关API setAutoCommit(boolean autoCommit)  将此连接的自动提交模式设置为给定状态.设置事务是否自动提交如果设置为false,表示手 ...

  7. CSS3实现兼容性的渐变背景效果

    一.CSS3实现兼容性渐变背景效果,兼容FF.chrome.IE 渐变效果,现在主流的浏览器FF.Chrome.Opera.IE8+都可以通过带有私有前缀的CSS3属性来轻松滴实现渐变效果,IE7及以 ...

  8. leetcode 题解 ||　Swap Nodes in Pairs 问题

    problem: Given a linked list, swap every two adjacent nodes and return its head. For example, Given ...

  9. Apache Solr配置

    Solr配置 Solr的主要功能是全文检索,该功能分为两个过程:创建索引和对索引进行搜索: 在创建索引之前,需要重点关注两个配置文件:SOLR_HOME/collection1/conf/schema ...

  10. kindle

    http://www.mindmap8.com/Kindle_Paperwhite/20130726266.html http://blog.csdn.net/felomeng/article/det ...