两千人站长交流群:462137404 / VIP用户交流群:462197261 收藏本站哈站网 zhan.ha.cn 精品建站资源第一站,让建站变得更加容易!
业务咨询:78895949 联系电话:13402647354
  • 当前位置:
  • 纯CSS3代码实现switch滑动开关按钮效果

    DIV+CSS教程2018年05月30日关键词:

    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滑动开关按钮效果 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

    其他网友正在看:
    浅谈css之属性及剩余的选择符

    今天的课程加速了,比平时快了些,但觉得很不错。nice~属性选择符E[att]       选择具有att属性的E元素。XML/HTML Code复制内容到剪贴板input[type]{color: #red;}<input type="radio">  E[att=···

    2018-05-30关键词:

    前端制作动画的几种方式(css3,js)

    制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式。1.css的transition。语法:transition: property duration timing-func···

    2018-05-30关键词:

    IE8的css hack \9 使用说明

    首先感谢“丸子”提供的这个IE8的css hack; 关注过IE8的css hack的人相信大家都在使用这个hack,就是“\9”的css hack: .test{ color:#000000; /* FF,OP支持 */ color:#0000FF\9; /* 所有IE浏览器(ie6+)支持 ;但是IE8不能识别“*”和&l···

    2018-05-30关键词:

    CSS性能优化提高css性能的方法

    不规范的css会导致很多性能问题,这些问题可能在一些小的项目中不够明显,但是在大型项目中就会显现出来。css匹配原理在优化css之前我们需要了解下css是怎么进行工作的,我们都知道css是由选择器,属性和属性值构成的。我们可能会这样写上一行代码CSS Code复制内容到剪贴···

    2018-05-30关键词:

    DIV始终浮动在页面底部

    废话不多说了,下面小编给大家分享下实现代码,具体代码如下所示:CSS Code复制内容到剪贴板<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition···

    2018-05-30关键词:

    CSS中的指定值、初始值和计算值学习教程

    CSS 中的声明,由 CSS 的特性和值,中间以 ":" 隔开组成。我们可以使用 CSS 选择器,为选中的元素设置需要的样式。在介绍 CSS 的特性和值的时候,特地的提到了浏览器应该怎样处理错误的值 — 应该将包含错误值,不符合句法的值的声明直接忽略。然而有些浏览器却···

    2018-05-30关键词: