一个iOS7就像开关开关按钮纯CSS实现

这篇文章主要是为您介绍一个iOS7开关按钮开关纯CSS实现，不需要领导的JS代码，这两种颜色的实现，演示三种不同的大小，需要的朋友可以参考下
今天，我将介绍一个开关按钮，模仿iOS7。这个按钮也由纯CSS，JS代码不需要领导。在执行中，两种颜色，演示三种不同尺寸给出。看看效果图。
实现的代码。

HTML代码：
复制代码代码如下所示：

带有CSS的iOS 7样式开关

Bandar Raffah

大
正常
小

CSS代码：
复制代码如下：输入{ =复选框}
{
位置：绝对；
不透明性：0；
}

法线轨道
输入{
{
垂直对齐：中间；
宽度：40px；
身高：20px；
border: 1px solid RGBA（0,0,0，。4）；
边界半径：999px；
背景颜色：RGBA（0, 0, 0，0.1）；
过渡时间：4s WebKit；
WebKit的过渡性质：背景颜色，盒子的影子；
盒子的影子：插图000 0px RGBA（0,0,0,0.4）；
保证金：15px 1.2em 15px 2.5em；
}

选中的轨道（蓝色）
输入{复选框}。
{
宽度：40px；
背景位置：00；
背景颜色：# 3b89ec；
边境：1px solid # 0e62cd；
盒子的影子：插图000 10px RGBA（59137259,1）；
}

小磁道
输入{类型=复选框}。tinyswitch.ios-switch CSS+DIV
{
宽度：34px；
身高：18px；
}

大通道/ ***
输入{类型=复选框}。bigswitch.ios-switch CSS+DIV
{
宽度：50px；
身高：25px；
}

绿色轨道
输入{
{
背景颜色：# 00e359；
border: 1px solid RGBA（0, 162，63,1）；
盒子的影子：插图000 10px RGBA（0227,89,1）；
}

正常旋钮 ***
输入{
{
浮点数：左；
宽度：18px；
身高：18px；
边界半径：继承；
背景：# ffffff；
WebKit转换定时功能：三次贝塞尔（。54,1.85，。5）；
WebKit的过渡时间：0.4s；
WebKit的过渡性质：变换，背景颜色，盒子的影子；
-moz过渡定时功能：三次贝塞尔（。54,1.85，。5）；
-个过渡时间：0.4s；
-moz过渡性质：变换，背景颜色；
盒子的影子：0px 2px 5px RGBA（0, 0, 0，0.3），0 1px 0px 0px RGBA（0, 0, 0，0.4）；
指针事件：无；
边距：1px；
左：1px保证金；
}

*检查旋钮（蓝色样式）。
输入{复选框}。
{
WebKit的变换：translate3d（20px，0, 0）；
-moz变换：translate3d（20px，0, 0）；
背景颜色：# ffffff；
盒子的影子：0px 2px 5px RGBA（0, 0, 0，0.3），0 1px 0px 0px RGBA（8, 80，172,1）；
}

小旋钮
输入{类型=复选框}。tinyswitch.ios-switch + div
{
宽度：16px；
身高：16px；
边距：1px；
}

选中的小旋钮（蓝色样式）。
输入{类型=复选框}。TinySwitch。iOS开关：检查+ div
{
WebKit的变换：translate3d（16px，0, 0）；
-moz变换：translate3d（16px，0, 0）；
盒子的影子：0px 2px 5px RGBA（0, 0, 0，0.3），0 1px 0px 0px RGBA（8, 80，172,1）；
}

大旋钮
输入{类型=复选框}。bigswitch.ios-switch + div
{
宽度：23px；
身高：23px；
边距：1px；
}

检查大旋钮（蓝色样式）。
输入{类型=复选框}，BigSwitch。iOS开关：检查+ div
{
WebKit的变换：translate3d（25px，0, 0）；
-moz变换：translate3d（16px，0, 0）；
盒子的影子：0px 4px 8px RGBA（0, 0, 0，0.3），0 1px 0px 0px RGBA（8, 80，172,1）；
}

绿色旋钮
输入{复选框
{
盒子的影子：0px 2px 5px RGBA（0, 0, 0，0.3），000 1px RGBA（0, 162，63,1）；
}

不必要的页面装饰
体
{
WebKit的用户选择：无；
游标：默认值；
字体：18pxHelvetica Neue；
颜色：RGBA（0, 0, 0，0.77）；
字体重量：200；
左：30px填充；
0px垫上；
背景：WebKit的线性梯度（顶部，# f2fbff 0%，# ffffff 64%）不重复；
背景：-moz线性梯度（顶部，# f2fbff 0%，# ffffff 64%）不重复；
背景：MS线性梯度（顶部，# f2fbff 0%，# ffffff 64%）不重复；
Background: linear-gradient (to bottom, #f2fbff 0%, #ffffff 64%) no-repeat;
}
H1
{
字体重量：100；
字体大小：40px；
颜色：# 135ae4；
}
H2
{
字体重量：200；
字体大小：22px；
颜色：# 03b000；
}
H3
{
字体重量：200；
字体大小：18px；
颜色：RGBA（0, 0, 0，0.77）；
边距：50px；
}
一：链接
{
文字装饰：无；
颜色：# F06；
}
答：访问
{
文字装饰：无；
颜色：# F06；
}
答：悬停
{
文字装饰：下划线；
}
一：主动
{
文字装饰：下划线；
}