這篇文章將為大家詳細講解有關如何使用純css實現(xiàn)開關效果,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
成都創(chuàng)新互聯(lián)公司專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務,包含不限于網(wǎng)站設計制作、網(wǎng)站制作、平果網(wǎng)絡推廣、小程序定制開發(fā)、平果網(wǎng)絡營銷、平果企業(yè)策劃、平果品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等,從售前售中售后,我們都將竭誠為您服務,您的肯定,是我們大的嘉獎;成都創(chuàng)新互聯(lián)公司為所有大學生創(chuàng)業(yè)者提供平果建站搭建服務,24小時服務熱線:18982081108,官方網(wǎng)址:www.cdcxhl.com首先是構思
我們使用標簽來實現(xiàn)這個效果。
checkbox的選中、未選中的特性,剛好對應開關的打開、關閉
on:打開 off:關閉
開始畫出off、on狀態(tài)的草圖
這里要講解一下,使用了position來實現(xiàn)的定位。有不了解的同學可以打開MDN查看相關知識
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; }
然后我們將這兩個草圖放到label內
結合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; }
關于“如何使用純css實現(xiàn)開關效果”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。