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. Eclipse插件收藏列表

    viPlugin 2.11.0 AnyEdit Tools 2.4.4 EclipseColorer 0.8.0 PyDev – Python IDE for Eclipse 2.7.5 MoreUn ...

  2. java实现简单的文件筛选

    package filenameFilter; import java.io.File; /* * 实现功能: * 获取指定路径下的指定格式的文件; * */ public class Test { ...

  3. HTML快速参考

    HTML 模版 html> <head> <meta charset="utf-8"/> <title>html template< ...

  4. equals()和hashCode()区别？

    equals()和hashCode()区别? ------------------------------------------------- equals():反映的是对象或变量具体的值,即两个对 ...

  5. jetty之建立多Connector

    转自:http://blog.csdn.net/kongxx/article/details/7218787 在嵌入运行Jetty的时候,有时候想要启动两个端口,或者通过一个Jetty server提 ...

  6. Java分布式优秀资源集合

    这里充分尊重原作者的版本,学习了知识要感激原博主 Runnable.Callable.Executor.Future.FutureTask关系解读 http://blog.csdn.net/zhang ...

  7. Android自定义“图片+文字”控件四种实现方法之 二--------个人最推荐的一种

    http://blog.csdn.net/yanzi1225627/article/details/8633872 第二种方法也要新建一个图片+文字的xml布局文件,然后写一个类继承自LinearLa ...

  8. qt 与mysql建立交互式连接

    void QSqlDatabase::setConnectOptions(const QString & options = QString())Sets database-specific ...

  9. iOS AFNetWorking源码详解（一）

    来源:Yuzeyang 链接:http://zeeyang.com/2016/02/21/AFNetWorking-one/ 首先来介绍下AFNetWorking,官方介绍如下: AFNetworki ...

  10. iOS UIKit：Navigation Controllers

    navigation controller是一种层次结构的container view controller,即其通过一个view controllers栈来管理内部的content view con ...