您的位置：首页 > Web前端 > > 正文

css3按钮闪烁（纯CSS3代码实现switch滑动开关按钮效果）

更多 时间：2022-01-22 01:32:47 类别：Web前端 浏览量：895

css3按钮闪烁

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

html结构

  • XML/HTML Code复制内容到剪贴板
    1. <li class="container">  
    2.         <li class="bg_con">  
    3.             <input id="checked_1" type="checkbox" class="switch" />  
    4.             <label for="checked_1"></label>  
    5.         </li>  
    6.     </li>  

    • css代码，:before负责颜色，:after是那个白色小圆点，切换时的过渡效果用css3的动画实现。

  • CSS Code复制内容到剪贴板
    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代码实现switch滑动开关按钮效果 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对开心学习网网站的支持！

    标签：开关按钮 滑动开关 Switch CSS3
  • 上一篇：vue 怎么设置滚动条的长度（vue使用better-scroll实现横向滚动的方法实例）
  • 下一篇：mysql数据库调优技术大全（Mysql数据库性能优化三分表、增量备份、还原）
    • 您可能感兴趣
    首页 编程学习 Web前端 数据库 软件设计
    开心学习 ©2013-2021 保留所有权利