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

目前創(chuàng)新互聯(lián)已為上千多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、虛擬主機(jī)、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、南漳網(wǎng)站維護(hù)等服務(wù)，公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略，正道將秉承"和諧、參與、激情"的文化，與客戶和合作伙伴齊心協(xié)力一起成長，共同發(fā)展。

首先是構(gòu)思：

我們使用標(biāo)簽來實(shí)現(xiàn)這個(gè)效果。

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

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

  
  未選中，則關(guān)閉開關(guān)




  
  選中，則打開開關(guān)

效果：

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

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

off狀態(tài)草圖

  




on狀態(tài)草圖

  


.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)

效果：

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

  
  

    

  




  
  

    

  

.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è)開關(guān)的功能了，記得將input隱藏起來哦。

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

分享文章：如何利用css實(shí)現(xiàn)開關(guān)效果-創(chuàng)新互聯(lián)
網(wǎng)頁URL：http://weahome.cn/article/csdgei.html