纯CSS3代码实现switch滑动开关按钮效果

网站建设 2021-07-03 08:42www.dzhlxh.cn网站建设

html结构

XML/HTML Code复制内容到剪贴板
  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负责颜色,:after是那个白色小圆点,切换时的过渡效果用css3的动画实现。

CSS Code复制内容到剪贴板
  1. .switch{   
  2.         display:none;   
  3.     }   
  4.     label{   
  5.         position:relative;   
  6.         displayblock;   
  7.         padding1px;   
  8.         border-radius: 24px;   
  9.         height22px;   
  10.         margin-bottom15px;   
  11.         background-color#eee;   
  12.         cursorpointer;   
  13.         vertical-aligntop;   
  14.         -webkit-user-select: none;   
  15.     }   
  16.     label:before{   
  17.         content'';   
  18.         displayblock;   
  19.         border-radius: 24px;   
  20.         height22px;   
  21.         background-colorwhite;   
  22.         -webkit-transform: scale(1, 1);   
  23.         -webkit-transition: all 0.3s ease;   
  24.     }   
  25.     label:after{   
  26.         content'';   
  27.         positionabsolute;   
  28.         top: 50%;     
  29.         left: 50%;     
  30.         margin-top: -11px;     
  31.         margin-left: -11px;   
  32.         width22px;   
  33.         height22px;   
  34.         border-radius: 22px;   
  35.         background-colorwhite;   
  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代码实现switch滑动开关按钮效果 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,长沙网络推广会及时回复大家的。在此也非常感谢大家对狼蚁SEO网站的支持!

Copyright © 2016-2025 www.dzhlxh.cn 金源码 版权所有 Power by

网站模板下载|网络推广|微博营销|seo优化|视频营销|网络营销|微信营销|网站建设|织梦模板|小程序模板