首先是構思：
我們使用標籤來實現這個效果。
checkbox的選取、未選取的特性，剛好對應開關的開啟、關閉
on:開啟off:關閉
<label for="ck2"> <input type="checkbox" id="ck2"> <span>未选中，则关闭开关</span> </label> <br> <label for="ck1"> <input type="checkbox" id="ck1" checked> <span>选中，则打开开关</span> </label>
效果：
（推薦教學：CSS入門教學）
開始畫出off、on狀態的草圖
這裡要講解一下，使用了position來實現的定位。有不了解的同學可以打開MDN查看相關知識
<P>off状态草图</P>
<div class="toggle">
<div class="cookie"></div>
</div>
<br>
<P>on状态草图</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內
<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>效果：
結合label與checkbox整理、最佳化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;
}效果：
到此為止就已經基本實現一個開關的功能了，記得將input隱藏起來哦。
相關影片教學推薦：css影片教學
#以上是css如何達到開關效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
