首先是構(gòu)思：

我們使用<input type="checkbox">標(biāo)簽來實現(xiàn)這個效果。

checkbox的選中、未選中的特性，剛好對應(yīng)開關(guān)的打開、關(guān)閉

on:打開 off:關(guān)閉

<label for="ck2">   <input type="checkbox" id="ck2">   <span>未選中，則關(guān)閉開關(guān)</span> </label> <br> <label for="ck1">   <input type="checkbox" id="ck1" checked>   <span>選中，則打開開關(guān)</span> </label>

效果：

（推薦教程：CSS入門教程）

開始畫出off、on狀態(tài)的草圖

這里要講解一下，使用了position來實現(xiàn)的定位。有不了解的同學(xué)可以打開MDN查看相關(guān)知識

<P>off狀態(tài)草圖</P> <div class="toggle">   <div class="cookie"></div> </div> <br> <P>on狀態(tài)草圖</P> <div class="toggle2">   <div class="cookie2"></div> </div> .toggle{   display:inline-block;   position:relative;   height:25px;   width:50px;     border-radius:4px;   background:#CC0000; } .cookie{   position:absolute;   left:2px;   top:2px;   bottom:2px;   width:50%;   background:rgba(230,230,230,0.9);   border-radius:3px; } .toggle2{   display:inline-block;   position:relative;   height:25px;   width:50px;    padding:2px;   border-radius:4px;   background:#66CC33;   } .cookie2{   position:absolute;   right:2px;   top:2px;   bottom:2px;     width:50%;   background:rgba(230,230,230,0.9);   border-radius:3px; }

效果：

然后我們將這兩個草圖放到label內(nèi)

<label for="ck4">   <input type="checkbox" id="ck4">   <div class="toggle">     <div class="cookie"></div>   </div> </label> <br> <label for="ck3">   <input type="checkbox" id="ck3" checked>   <div class="toggle2">     <div class="cookie2"></div>   </div> </label>

效果：

結(jié)合label和checkbox整理、優(yōu)化css

<label for="ck5">   <input type="checkbox" id="ck5">   <div class="toggle-finish">     <div class="cookie-finish"></div>   </div> </label> <br> <label for="ck6">   <input type="checkbox" id="ck6" checked>   <div class="toggle-finish">     <div class="cookie-finish"></div>   </div> </label> .toggle-finish{   cursor:pointer;   display:inline-block;   position:relative;   height:25px;   width:50px;     border-radius:4px;   background:#CC0000; } .cookie-finish{   position:absolute;   left:2px;   top:2px;   bottom:2px;   width:50%;   background:rgba(230,230,230,0.9);   border-radius:3px; } input:checked + .toggle-finish{   background:#66CC33;   } input:checked + .toggle-finish .cookie-finish{    left:auto;   right:2px; }

效果：

到此為止就已經(jīng)基本實現(xiàn)一個開關(guān)的功能了，記得將input隱藏起來哦。

相關(guān)視頻教程推薦：css視頻教程