没有太多的谈话，显示效果图，并附上演示和源代码下载。

结果如下：

下载下载演示源代码

HTML结构代码：

CSS代码：




切换样式表
{用户界面开关
位置：绝对；
字体大小：。16rem；
右：0.07rem；
顶部：50%；
边距：-0.16rem；
7rem宽度；
3rem高度；
线的高度。3rem；
}
用户界面开关{输入
7rem宽度；
3rem高度；
位置：绝对；
顶部：0；左：0；
Z指数：2；
边界：0；
背景：00；
WebKit的外观：无；
概述：0
}
用户界面开关{输入：之前
内容；
68rem宽度；
3rem高度；
边境：1px solid # dfdfdf；
背景颜色：# fdfdfd；
2rem边界半径；
鼠标指针；
显示：内联块；
职位：相对；
垂直对齐：中间；
Webkit盒尺寸：内容框；
盒子大小：内容框；
边框颜色：# dfdfdf；
Webkit框阴影：# dfdfdf 0000插图；
Box-shadow: #dfdfdf 0000 inset;
WebKit的过渡：border.4s，-webkit-box-shadow.4s；
过渡：border.4s，box-shadow.4s；
WebKit的背景短片：内容框；
背景剪辑：内容框
}

用户界面开关{输入：检查：之前
边框颜色：# 64bd63；
Webkit框阴影：插图# 64bd63 000 0.16rem；
盒子的影子：插图# 64bd63 000 0.16rem；
背景颜色：# 64bd63；
过渡：border.4s，box-shadow.4s，背景颜色1.2s；
WebKit的过渡：border.4s，-webkit-box-shadow.4s，背景颜色1.2s；
背景颜色：# 64bd63
}
UI开关{输入：检查：后
左：。4rem
}
用户界面开关{输入：后
内容；
3rem宽度；
3rem高度；
位置：绝对；
顶部：50%；
左：0；
WebKit的变换：translatey（- 50%）；
边框半径：100%；
背景颜色：# FFF；
Webkit框阴影：0 0.01rem 0.03rem RGBA（0,0,0，。4）；
盒子的影子：0 0.01rem 0.03rem RGBA（0,0,0，。4）；
WebKit的过渡：left.2s；
过渡：left.2s
}