如何使用純css實現(xiàn)開關(guān)效果

這篇文章將為大家詳細講解有關(guān)如何使用純css實現(xiàn)開關(guān)效果，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

首先是構(gòu)思

我們使用<input type="checkbox">標簽來實現(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>

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

這里要講解一下，使用了position來實現(xiàn)的定位。有不了解的同學可以打開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;
}

關(guān)于“如何使用純css實現(xiàn)開關(guān)效果”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。