知识点：
1.css3 transition的使用
2.label 和 checkbox的绑定
3.absolute与relative的使用
4.css3伪元素
讲解：
1.css3 transition
参考资料：http://www.w3school.com.cn/cssref/pr_transition.asp
个人理解：主要用于实现html元素的属性进行渐进式的变化。所以必输元素有三：属性 渐变时间长度 渐变效果
2.label和checkbox的绑定
参考资料：http://www.w3school.com.cn/tags/att_label_for.asp
个人理解：分为隐式和显示两种。通过id进行绑定，将label绑定到checkbox，能够让点击label时，让checkbox也获得焦点。
3.absolute和relateive的使用
参考资料：http://www.jianshu.com/p/a3da5e27d22b http://www.jianshu.com/p/07eb19957991
个人理解：absolute让元素脱离文档流，并且父元素彻底无法感知加了absolute的元素。relative给absolute添加了天花板，在relative的范围内变化。
设计思路：
开关按钮存在开关两种状态，最适合模拟的元素为checkbox。checkbox比较丑，所以我们需要保留元素功能，隐藏元素，同时还能够获得和丢失checkbox的状态。因此，需要引入label，作为显示。label作为容器，内部添加两个span。一个是用来显示on/off，一个用来表示开关的小按钮。on/off作为文字进行滑动效果，小按钮也引入滑动效果。
代码实现：
<html>
<head>
<title>switch</title>
<style type="text/css">
.switch{
display: block;
float: left;
position: relative;
width: 200px;
height: 50px;
}
#test{
display: none;
}
.switch-label{
display: block;
overflow: hidden;
width: 160px;
height: 50px;
border-radius: 8px;
border: 1px solid gray;
}
.switch-txt {
display: block;
width: 200%;
border-radius: 8px;
height: 50px;
transition:margin 0.3s ease-in;
}
.switch-txt::before,.switch-txt:after {
display: block;
float: right;
text-align: center;
line-height: 50px;
width: 50%;
height: 50px;
}
.switch-txt::before {
content: attr(data-on);
background-color: green;
}
.switch-txt::after {
content: attr(data-off);
background-color: gray;
}
.switch-switch {
display: block;
position: absolute;
width: 20px;
border-radius: 8px;
top: 0;
bottom: 0;
right: 89%;
background-color: white;
transition: all 0.3s ease-in;
}
#test:checked + .switch-label .switch-switch {
right:40px;
}
#test:checked + .switch-label .switch-txt {
margin-left: -100%;
}
</style>
</head>
<body>
<div class="switch">
<input id="test" type="checkbox">
<label for="test" class="switch-label">
<span class="switch-txt" data-on="ON" data-off="OFF"></span>
<span class="switch-switch"></span>
</label>
</div>
</body>
</html>
实现效果：
