亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

純CSS3代碼實(shí)現(xiàn)switch滑動(dòng)開(kāi)關(guān)按鈕效果

  發(fā)布時(shí)間：2016-08-30 15:11:12   作者：佚名   我要評(píng)論
今天小編給大家?guī)?lái)一個(gè)小demo，使用純css3代碼實(shí)現(xiàn)switch滑動(dòng)開(kāi)關(guān)按鈕效果，非常實(shí)用，感興趣的朋友可以參考下

html結(jié)構(gòu)

XML/HTML Code復(fù)制內(nèi)容到剪貼板
  1. <div class="container">  
  2.         <div class="bg_con">  
  3.             <input id="checked_1" type="checkbox" class="switch" />  
  4.             <label for="checked_1"></label>  
  5.         </div>  
  6.     </div>  

css代碼，:before負(fù)責(zé)顏色，:after是那個(gè)白色小圓點(diǎn)，切換時(shí)的過(guò)渡效果用css3的動(dòng)畫(huà)實(shí)現(xiàn)。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. .switch{   
  2.         display:none;   
  3.     }   
  4.     label{   
  5.         position:relative;   
  6.         display: block;   
  7.         padding: 1px;   
  8.         border-radius: 24px;   
  9.         height: 22px;   
  10.         margin-bottom: 15px;   
  11.         background-color: #eee;   
  12.         cursor: pointer;   
  13.         vertical-align: top;   
  14.         -webkit-user-select: none;   
  15.     }   
  16.     label:before{   
  17.         content: '';   
  18.         display: block;   
  19.         border-radius: 24px;   
  20.         height: 22px;   
  21.         background-color: white;   
  22.         -webkit-transform: scale(1, 1);   
  23.         -webkit-transition: all 0.3s ease;   
  24.     }   
  25.     label:after{   
  26.         content: '';   
  27.         position: absolute;   
  28.         top: 50%;     
  29.         left: 50%;     
  30.         margin-top: -11px;     
  31.         margin-left: -11px;   
  32.         width: 22px;   
  33.         height: 22px;   
  34.         border-radius: 22px;   
  35.         background-color: white;   
  36.         box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.08);   
  37.         -webkit-transform: translateX(-9px);   
  38.         -webkit-transition: all 0.3s ease;   
  39.     }   
  40.     .switch:checked~label:after{   
  41.         -webkit-transform: translateX(9px);   
  42.     }   
  43.     .switch:checked~label:before{   
  44.         background-color:green;   
  45.     }    

以上所述是小編給大家介紹的純CSS3代碼實(shí)現(xiàn)switch滑動(dòng)開(kāi)關(guān)按鈕效果 ，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

相關(guān)文章

最新評(píng)論