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

html结构

XML/HTML Code复制内容到剪贴板

<div class="container">  
        <div class="bg_con">  
            <input id="checked_1" type="checkbox" class="switch" />  
            <label for="checked_1"></label>  
        </div>  
    </div>  

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

CSS Code复制内容到剪贴板

.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%;