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. hdoj 5461 Largest Point

    Largest Point Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others)Tot ...

  2. JAVA 面向对象-2-继承(Inheritance)

    i.继承(Inheritance) 1.继承的概念 继承:在面向对象编程的过程中,通过扩展一个已有的类,并继承该类的属性和行为,来创建一个新的类. 继承是面向对象编程最重要的特征之一. 继承的优点:1 ...

  3. 修复南尼U盘

    通常拿到手的U盘,用数码之家的ChipGenius一般检测不出主控型号,所以需要用到U盘量产工具来测. 量产工具注意版本 一般靠后的版本才能识别使用, . 如果识别不了==> 自动换成手动,U盘 ...

  4. php 写一个水仙花数的函数

    判断一个数是不是水仙花数 <?php function is_shuixianhua($i) { $length=strlen($i); $i=(string)$i; $sum=0; for($ ...

  5. Android开发_控制硬加速hardwareAccelerated

    控制硬加速 hardwareAccelerated也是一种优化的手段 从Android3.0 (API level11)开始,Android的2D显示管道被被设计得更加支持硬加速了．硬加速使用GPU承 ...

  6. HDU2149-Good Luck in CET-4 Everybody!(博弈，打表找规律)

    Good Luck in CET-4 Everybody! Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K ...

  7. JAVA向文件中追加内容(转)

    向文件尾加入内容有多种方法,常见的方法有两种: RandomAccessFile类可以实现随机访问文件的功能,可以以读写方式打开文件夹的输出流 public void seek(long pos)可以 ...

  8. TCP keepalive under Linux

    TCP Keepalive HOWTO Prev   Next 3. Using TCP keepalive under Linux Linux has built-in support for ke ...

  9. java 流程执行 循环 foreach循环

    一. if分支 1. 结构  if  else if   else 2.执行原则 if  if  if 结构  会一直去执行()里的判断语句 if else if  else if 结构  只要一条( ...

  10. hdu2049.java

    hdu 2049 不容易系列之(4)——考新郎 (组合+错排) 国庆期间,省城HZ刚刚举行了一场盛大的集体婚礼,为了使婚礼进行的丰富一些,司仪临时想出了有一个有意思的节目,叫做"考新郎&qu ...