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. SampleManager（赛默飞）

  2. 基于RMAN从活动数据库异机克隆(rman duplicate from active DB)

    Oracle 11g RMAN能够实现基于活动数据库进行异机克隆,从而省去需要先备份再ftp到辅助服务器的过程.这一切可以全部交给Oracle来搞定.在克隆期间,Oracle会读取Target DB的 ...

  3. win7下jdk安装环境变量配置

    新本本,新系统,还是得把武器给装配好. 以下图文记录win7系统下的jdk的安装和配置. 1.下载jdk 地址:http://java.sun.com/javase/downloads/index.j ...

  4. SOA是什么

    一.SOA是什么   SOA的全称是Service-Oriented Architecture,面向服务架构.是一种架构,不是一种具体的开发技术.   要真正理解什么是SOA需要从软件开发的技术发展史 ...

  5. jdk1.5多线程Lock接口及Condition接口

    jdk1.5多线程的实现的方式: jdk1.5之前对锁的操作是隐式的 synchronized(对象) //获取锁 { } //释放锁 jdk1.5锁的操作是显示的:在包java.util.concu ...

  6. Audit(查看审核/审计信息)

    2013需要到 网站集管理-网站集审核设置 中设置要开启的审核项,开启之后sharepoint才会记录信息,信息存储在contentDB的AuditData中: 去读审计信息的sharepoint代码 ...

  7. 所有Mac用户都需要知道的9个实用终端命令行<转>

    转自 http://www.macx.cn/thread-2075903-1-1.html 通常情况下,只有高端用户才会经常用到终端应用.这并不意味着命令行非常难学,有的时候命令行可以轻松.快速的解决 ...

  8. 安装指南：Win10下安装CentOs7

    系统安装 安装准备 系统:CentOS 7.Win 10 硬件:U盘一枚.PC一台 软件:UltraISO 安装步骤 使用UltraISO将镜像写入U盘 window10使用磁盘管理,空出一个未分配的 ...

  9. 插件GsonFormat快速实现JavaBean

    转自:http://blog.csdn.net/dakaring/article/details/46300963#comments 安装方法 方法一: 1.Android studio File-& ...

  10. ajax 基础教程

    这是一本什么书?这是一本技术类的书籍,主要从历史.XMLHttpRequest对象.怎么样于服务器交互.构建完备的Ajax开发工具箱.使用jsUnit测试javascript 代码,总之就是让我们从这 ...