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. Install MongoDB on Windows

    Overview Use this tutorial to install MongoDB on a Windows systems. PLATFORM SUPPORT Starting in ver ...

  2. 使用VNC实现多用户登录linux系统

    vmare版本:12.0.0 build-2985596

  3. Day 1 @ RSA Conference Asia Pacific & Japan 2016

    # 国内出发 早上8:45的航班,首次从深圳机场乘坐国际航班(先前去日本.欧洲都从香港走),就提前了3个小时出发. 乘taxi到机场30分钟不到,135元.到了T3 4号出发口,发现check-in的 ...

  4. Unity3D跨平台时partial分部方法的使用

    最近看到项目中插件的一部分逻辑,发现问题多多,可读性很差,并且容易出错,于是随手整理了下逻 辑.Unity3D的插件逻辑,因为要考虑到针对各平台的移植,因此会大片的出现#if/#endif等条件编译, ...

  5. android实习程序7——通话记录显示

    下载SQLiteSpy.exe 打开模拟器5554 打开perspective,选择DDMS 打开Devices,确认存在emulator-5554 打开file Explorer 打开data文件夹 ...

  6. NPOI组件集锦

    关于NPOI不错的介绍:http://www.cnblogs.com/restran/p/3889479.html http://www.cnblogs.com/Irving/archive/2012 ...

  7. 50个Android开发技巧(24 处理ListView数据为空的情况)

         在移动平台上为用户展示数据的一个经常用法是将数据填充进一个List内,而此时须要注意的一点就是: 原文地址:(http://blog.csdn.net/vector_yi/article/d ...

  8. VSS的运用小内容（针对于vs2008版本）（小的问题都是，仅供参考--只针对于菜鸟级的）

    自己开始接触vss 的时候有些小的习惯没有很好的养成,下面的有关VSS内容都是简单的迁入迁出的问题,(仅供参考) 1.文件的迁入迁出:(.txt..xlsx..doc) a:文件的覆盖问题: 对于文件 ...

  9. Java IO流学习总结(转)

    Java流操作有关的类或接口: Java流类图结构: 流的概念和作用 流是一组有顺序的,有起点和终点的字节集合,是对数据传输的总称或抽象.即数据在两设备间的传输称为流,流的本质是数据传输,根据数据传输 ...

  10. pnd3

    这两天重写了,消除后本身的下落计算还有问题,新产生的块下落和消除已经OK了.消除算法真的很要命.最后还是回归最开始的想法,用递归的方式不断的SPREAD来得到消除的数据.快到月底了,得勤写写了,要不找 ...