如何用css3實(shí)現(xiàn)switch組件開(kāi)關(guān)的方法
我要評(píng)論本文介紹了用css3實(shí)現(xiàn)switch組件的方法，分享給大家，具體如下：
基于表單的checkbox
效果圖
原理
checkbox, 有兩種狀態(tài), 沒(méi)選中和選中, 當(dāng)選中的時(shí)候(:checked), 改變樣式即可, 首先得清除瀏覽器默認(rèn)的樣式, apperance: none, 本文代碼只在chrome中運(yùn)行, 如果需要寫兼容性代碼, 給apperance和transition加上前綴就好
html代碼
<input class='switch-component' type='checkbox'>
css代碼
// switch組件
.switch-component {
position: relative;
width: 60px;
height: 30px;
background-color: #dadada;
border-radius: 30px;
border: none;
outline: none;
-webkit-appearance: none;
transition: all .2s ease;
}
// 按鈕
switch-component::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: #fff;
border-radius: 50%;
transition: all .2s ease;
}
// checked狀態(tài)時(shí)，背景顏色改變
.switch-component:checked {
background-color: #86c0fa;
}
// checked狀態(tài)時(shí)，按鈕位置改變
.switch-component:checked::after {
left: 50%;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
CSS3實(shí)現(xiàn)的多組創(chuàng)意互動(dòng)式開(kāi)關(guān)切換按鈕動(dòng)畫(huà)特效源碼
CSS3實(shí)現(xiàn)的創(chuàng)意互動(dòng)式開(kāi)關(guān)切換按鈕特效源碼是一段實(shí)現(xiàn)了多組創(chuàng)意的CSS3動(dòng)畫(huà)按鈕特效，如：白天黑夜、難過(guò)開(kāi)心、高亮等等，非常實(shí)用，歡迎有需要的朋友前來(lái)下載使用2018-01-26
CSS3美化單選/復(fù)選/開(kāi)關(guān)按鈕樣式特效源碼
CSS3美化單選/復(fù)選/開(kāi)關(guān)按鈕樣式特效源碼是一款純CSS3的單選框，復(fù)選框，開(kāi)關(guān)按鈕UI庫(kù)，實(shí)現(xiàn)了按鈕可選和按鈕不可選的效果，非常不錯(cuò)，歡迎有需要的朋友前來(lái)下載使用2017-12-21
純CSS3實(shí)現(xiàn)漂亮的點(diǎn)擊開(kāi)關(guān)切換動(dòng)畫(huà)效果源碼
這是一款基于純CSS3實(shí)現(xiàn)漂亮的點(diǎn)擊開(kāi)關(guān)切換動(dòng)畫(huà)效果源碼。界面上的開(kāi)關(guān)按鈕點(diǎn)擊時(shí)可呈現(xiàn)出帶有彈性翻牌動(dòng)作的動(dòng)畫(huà)視覺(jué)效果2017-11-02
純CSS3實(shí)現(xiàn)的炫酷checkbox復(fù)選框美化庫(kù)checkboxes.css(含開(kāi)關(guān)按鈕美化
checkboxes.css是一款純CSS3炫酷checkbox復(fù)選框美化庫(kù)。checkboxes.css可以通過(guò)在HTML代碼中簡(jiǎn)單的class配置，生成多種不同效果的checkbox美化樣式，其中包括復(fù)選框按鈕美2017-09-05
純css3實(shí)現(xiàn)的仿窗簾拉開(kāi)關(guān)閉百葉窗動(dòng)畫(huà)特效源碼
這是一款基于純css3實(shí)現(xiàn)的仿窗簾拉開(kāi)關(guān)閉百葉窗動(dòng)畫(huà)特效源碼。右側(cè)有兩個(gè)下拉桿，可點(diǎn)擊控制百葉窗的打開(kāi)與折疊收起等動(dòng)畫(huà)效果。2017-06-22CSS3模擬IOS滑動(dòng)開(kāi)關(guān)效果
這篇文章主要為大家詳細(xì)介紹了CSS3模擬IOS滑動(dòng)開(kāi)關(guān)效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-28
純CSS3實(shí)現(xiàn)精美的滑動(dòng)開(kāi)關(guān)按鈕特效
本特效是一組使用CSS3制作的精美滑動(dòng)開(kāi)關(guān)按鈕效果的代碼，這組滑動(dòng)按鈕按Bootstrap的情景類來(lái)設(shè)計(jì)，可以適應(yīng)5種不同的場(chǎng)景2016-09-23
純CSS3簡(jiǎn)單的滑動(dòng)開(kāi)關(guān)按鈕特效源碼
本源碼是一個(gè)使用純CSS3制作的滑動(dòng)開(kāi)關(guān)按鈕特效的代碼。使用偽元素來(lái)制作外觀，制作出4種安卓樣式特效2016-04-07
純CSS3實(shí)現(xiàn)的開(kāi)關(guān)按鈕動(dòng)畫(huà)特效源碼
是一款可以使用鼠標(biāo)來(lái)控制開(kāi)關(guān)滑動(dòng)，按鈕開(kāi)關(guān)滑動(dòng)時(shí)帶有很炫的動(dòng)畫(huà)和漸變效果的代碼，本段代碼適應(yīng)于所有網(wǎng)頁(yè)使用，有興趣的朋友們可以前來(lái)下載使用2015-10-15純css實(shí)現(xiàn)一款仿ios7的switches開(kāi)關(guān)按鈕
這篇文章主要為大家介紹了純css實(shí)現(xiàn)的一款仿ios7的switches開(kāi)關(guān)按鈕,無(wú)需引js代碼。在實(shí)現(xiàn)中給出了兩種顏色,三種不同大小的demo,需要的朋友可以參考下2014-10-22
