如何用css3實現(xiàn)switch組件開關的方法
發(fā)布時間：2018-02-09 15:26:40 作者：一英尺卷煙 
我要評論
我要評論這篇文章主要介紹了如何用css3實現(xiàn)switch組件的方法的相關資料,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
本文介紹了用css3實現(xiàn)switch組件的方法，分享給大家，具體如下：
基于表單的checkbox
效果圖
原理
checkbox, 有兩種狀態(tài), 沒選中和選中, 當選中的時候(:checked), 改變樣式即可, 首先得清除瀏覽器默認的樣式, apperance: none, 本文代碼只在chrome中運行, 如果需要寫兼容性代碼, 給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)時，背景顏色改變
.switch-component:checked {
background-color: #86c0fa;
}
// checked狀態(tài)時，按鈕位置改變
.switch-component:checked::after {
left: 50%;
}
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
CSS3實現(xiàn)的多組創(chuàng)意互動式開關切換按鈕動畫特效源碼
CSS3實現(xiàn)的創(chuàng)意互動式開關切換按鈕特效源碼是一段實現(xiàn)了多組創(chuàng)意的CSS3動畫按鈕特效，如：白天黑夜、難過開心、高亮等等，非常實用，歡迎有需要的朋友前來下載使用2018-01-26
CSS3美化單選/復選/開關按鈕樣式特效源碼是一款純CSS3的單選框，復選框，開關按鈕UI庫，實現(xiàn)了按鈕可選和按鈕不可選的效果，非常不錯，歡迎有需要的朋友前來下載使用2017-12-21
這是一款基于純CSS3實現(xiàn)漂亮的點擊開關切換動畫效果源碼。界面上的開關按鈕點擊時可呈現(xiàn)出帶有彈性翻牌動作的動畫視覺效果2017-11-02
純CSS3實現(xiàn)的炫酷checkbox復選框美化庫checkboxes.css(含開關按鈕美化
checkboxes.css是一款純CSS3炫酷checkbox復選框美化庫。checkboxes.css可以通過在HTML代碼中簡單的class配置，生成多種不同效果的checkbox美化樣式，其中包括復選框按鈕美2017-09-05
純css3實現(xiàn)的仿窗簾拉開關閉百葉窗動畫特效源碼
這是一款基于純css3實現(xiàn)的仿窗簾拉開關閉百葉窗動畫特效源碼。右側(cè)有兩個下拉桿，可點擊控制百葉窗的打開與折疊收起等動畫效果。2017-06-22- 這篇文章主要為大家詳細介紹了CSS3模擬IOS滑動開關效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-28
本特效是一組使用CSS3制作的精美滑動開關按鈕效果的代碼，這組滑動按鈕按Bootstrap的情景類來設計，可以適應5種不同的場景2016-09-23
本源碼是一個使用純CSS3制作的滑動開關按鈕特效的代碼。使用偽元素來制作外觀，制作出4種安卓樣式特效2016-04-07
是一款可以使用鼠標來控制開關滑動，按鈕開關滑動時帶有很炫的動畫和漸變效果的代碼，本段代碼適應于所有網(wǎng)頁使用，有興趣的朋友們可以前來下載使用2015-10-15純css實現(xiàn)一款仿ios7的switches開關按鈕
這篇文章主要為大家介紹了純css實現(xiàn)的一款仿ios7的switches開關按鈕,無需引js代碼。在實現(xiàn)中給出了兩種顏色,三種不同大小的demo,需要的朋友可以參考下2014-10-22
