知識點：
1.css3 transition的使用
2.label 和 checkbox的綁定
3.absolute與relative的使用
4.css3偽元素
講解：
1.css3 transition
參考資料：http://www.w3school.com.cn/cssref/pr_transition.asp
個人理解：主要用于實現(xiàn)html元素的屬性進行漸進式的變化。所以必輸元素有三：屬性 漸變時間長度 漸變效果
2.label和checkbox的綁定
參考資料：http://www.w3school.com.cn/tags/att_label_for.asp
個人理解：分為隱式和顯示兩種磁玉。通過id進行綁定鲁豪，將label綁定到checkbox刁岸，能夠讓點擊label時够掠，讓checkbox也獲得焦點碳默。
3.absolute和relateive的使用
參考資料：http://www.reibang.com/p/a3da5e27d22b http://www.reibang.com/p/07eb19957991
個人理解：absolute讓元素脫離文檔流挠日，并且父元素徹底無法感知加了absolute的元素宝磨。relative給absolute添加了天花板弧关，在relative的范圍內(nèi)變化。
設(shè)計思路：
開關(guān)按鈕存在開關(guān)兩種狀態(tài)懊烤，最適合模擬的元素為checkbox梯醒。checkbox比較丑，所以我們需要保留元素功能腌紧，隱藏元素茸习，同時還能夠獲得和丟失checkbox的狀態(tài)。因此壁肋，需要引入label号胚，作為顯示籽慢。label作為容器，內(nèi)部添加兩個span猫胁。一個是用來顯示on/off箱亿，一個用來表示開關(guān)的小按鈕。on/off作為文字進行滑動效果弃秆，小按鈕也引入滑動效果届惋。
代碼實現(xiàn)：
<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>
實現(xiàn)效果：
