純CSS3代碼實(shí)現(xiàn)switch滑動(dòng)開關(guān)按鈕效果
發(fā)布時(shí)間：2016-08-30 15:11:12 作者：佚名 
我要評(píng)論
我要評(píng)論今天小編給大家?guī)硪粋€(gè)小demo，使用純css3代碼實(shí)現(xiàn)switch滑動(dòng)開關(guān)按鈕效果，非常實(shí)用，感興趣的朋友可以參考下
html結(jié)構(gòu)
XML/HTML Code復(fù)制內(nèi)容到剪貼板
- <div class="container">
- <div class="bg_con">
- <input id="checked_1" type="checkbox" class="switch" />
- <label for="checked_1"></label>
- </div>
- </div>
css代碼，:before負(fù)責(zé)顏色，:after是那個(gè)白色小圓點(diǎn)，切換時(shí)的過渡效果用css3的動(dòng)畫實(shí)現(xiàn)。
CSS Code復(fù)制內(nèi)容到剪貼板
- .switch{
- display:none;
- }
- label{
- position:relative;
- display: block;
- padding: 1px;
- border-radius: 24px;
- height: 22px;
- margin-bottom: 15px;
- background-color: #eee;
- cursor: pointer;
- vertical-align: top;
- -webkit-user-select: none;
- }
- label:before{
- content: '';
- display: block;
- border-radius: 24px;
- height: 22px;
- background-color: white;
- -webkit-transform: scale(1, 1);
- -webkit-transition: all 0.3s ease;
- }
- label:after{
- content: '';
- position: absolute;
- top: 50%;
- left: 50%;
- margin-top: -11px;
- margin-left: -11px;
- width: 22px;
- height: 22px;
- border-radius: 22px;
- background-color: white;
- box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);
- -webkit-transform: translateX(-9px);
- -webkit-transition: all 0.3s ease;
- }
- .switch:checked~label:after{
- -webkit-transform: translateX(9px);
- }
- .switch:checked~label:before{
- background-color:green;
- }
以上所述是小編給大家介紹的純CSS3代碼實(shí)現(xiàn)switch滑動(dòng)開關(guān)按鈕效果 ，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
使用CSS3編寫類似iOS中的復(fù)選框及帶開關(guān)的按鈕
這篇文章主要介紹了使用CSS3編寫類似iOS中的復(fù)選框及帶開關(guān)的按鈕,需要的朋友可以參考下2016-04-11純css實(shí)現(xiàn)一款仿ios7的switches開關(guān)按鈕
這篇文章主要為大家介紹了純css實(shí)現(xiàn)的一款仿ios7的switches開關(guān)按鈕,無需引js代碼。在實(shí)現(xiàn)中給出了兩種顏色,三種不同大小的demo,需要的朋友可以參考下2014-10-22
一款非?？岬腃SS3 3D左右滑動(dòng)開關(guān)按鈕
一款非常酷的CSS3 3D開關(guān)按鈕，點(diǎn)擊按鈕可以左右滑動(dòng)2014-07-01
CSS3實(shí)現(xiàn)的滑桿開關(guān)切換按鈕動(dòng)畫
一款純CSS3實(shí)現(xiàn)的滑桿開關(guān)切換按鈕動(dòng)畫，這個(gè)按鈕是一個(gè)搖桿，桿子推上推下來切換開關(guān)狀態(tài)2014-05-12
一款非?？岬腃SS3開關(guān)切換按鈕，它不僅具有3D的效果，而且可以發(fā)光2014-04-23- 這篇文章主要介紹了CSS開關(guān)按鈕樣式，本文給大家?guī)砣N樣式，通過實(shí)例代碼給大家介紹的非常下關(guān)系，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-04
