html結(jié)構(gòu)

XML/HTML Code復(fù)制內(nèi)容到剪貼板

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

css代碼，:before負(fù)責(zé)顏色，:after是那個(gè)白色小圓點(diǎn)，切換時(shí)的過(guò)渡效果用css3的動(dòng)畫實(shí)現(xiàn)。

CSS Code復(fù)制內(nèi)容到剪貼板

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