如何利用css實(shí)現(xiàn)開(kāi)關(guān)效果

如何利用css實(shí)現(xiàn)開(kāi)關(guān)效果？為了讓大家更加了解css，小編給大家總結(jié)了以下內(nèi)容，一起往下看吧。

首先是構(gòu)思：

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

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

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

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

效果：

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

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

<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;
}

效果：

然后我們將這兩個(gè)草圖放到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)基本實(shí)現(xiàn)一個(gè)開(kāi)關(guān)的功能了，記得將input隱藏起來(lái)哦。

以上就是如何利用css實(shí)現(xiàn)開(kāi)關(guān)效果的詳細(xì)內(nèi)容了，看完之后是否有所收獲呢？如果如果想了解更多，歡迎來(lái)億速云行業(yè)資訊！億速云是一家業(yè)內(nèi)資深的專(zhuān)業(yè)云計(jì)算服務(wù)提供商哦，如果想購(gòu)買(mǎi)云服務(wù)器，香港服務(wù)器，美國(guó)服務(wù)器等產(chǎn)品的，可以多多關(guān)注哦。