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

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

        left: 50%;     

        margin-top: -11px;     

        margin-left: -11px;   

        width: 22px;   

        height: 22px;   

        border-radius: 22px;   

        background-color: white;   

（编辑：ASP站长网）