css3實現switch開關效果-html教學-PHP中文網

css3實現switch開關效果

WBOY

發布： 2016-08-31 08:41:47

原創

1435 人瀏覽過

之前阿里電面的時候問的一個問題，今天抽時間做了個demo。

html結構

    <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="container"</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"><</span><span style="color: #800000;">div </span><span style="color: #ff0000;">class</span><span style="color: #0000ff;">="bg_con"</span><span style="color: #0000ff;">></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">input </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="checked_1"</span><span style="color: #ff0000;"> type</span><span style="color: #0000ff;">="checkbox"</span><span style="color: #ff0000;"> class</span><span style="color: #0000ff;">="switch"</span> <span style="color: #0000ff;">/></span>
            <span style="color: #0000ff;"><</span><span style="color: #800000;">label </span><span style="color: #ff0000;">for</span><span style="color: #0000ff;">="checked_1"</span><span style="color: #0000ff;">></</span><span style="color: #800000;">label</span><span style="color: #0000ff;">></span>
        <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>
    <span style="color: #0000ff;"></</span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span>

登入後複製

css程式碼，:before負責顏色，:after是那個白色小圓點，切換時的過渡效果用css3的動畫實現。

<span style="color: #800000;">.switch</span>{<span style="color: #ff0000;">
        display</span>:<span style="color: #0000ff;">none</span>;
    }<span style="color: #800000;">
    label</span>{<span style="color: #ff0000;">
        position</span>:<span style="color: #0000ff;">relative</span>;<span style="color: #ff0000;">
        display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
        padding</span>:<span style="color: #0000ff;"> 1px</span>;<span style="color: #ff0000;">
        border-radius</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
        height</span>:<span style="color: #0000ff;"> 22px</span>;<span style="color: #ff0000;">
        margin-bottom</span>:<span style="color: #0000ff;"> 15px</span>;<span style="color: #ff0000;">
        background-color</span>:<span style="color: #0000ff;"> #eee</span>;<span style="color: #ff0000;">
        cursor</span>:<span style="color: #0000ff;"> pointer</span>;<span style="color: #ff0000;">
        vertical-align</span>:<span style="color: #0000ff;"> top</span>;<span style="color: #ff0000;">
        -webkit-user-select</span>:<span style="color: #0000ff;"> none</span>;
    }<span style="color: #800000;">
    label:before</span>{<span style="color: #ff0000;">
        content</span>:<span style="color: #0000ff;"> ''</span>;<span style="color: #ff0000;">
        display</span>:<span style="color: #0000ff;"> block</span>;<span style="color: #ff0000;">
        border-radius</span>:<span style="color: #0000ff;"> 24px</span>;<span style="color: #ff0000;">
        height</span>:<span style="color: #0000ff;"> 22px</span>;<span style="color: #ff0000;">
        background-color</span>:<span style="color: #0000ff;"> white</span>;<span style="color: #ff0000;">
        -webkit-transform</span>:<span style="color: #0000ff;"> scale(1, 1)</span>;<span style="color: #ff0000;">
        -webkit-transition</span>:<span style="color: #0000ff;"> all 0.3s ease</span>;
    }<span style="color: #800000;">
    label:after</span>{<span style="color: #ff0000;">
        content</span>:<span style="color: #0000ff;"> ''</span>;<span style="color: #ff0000;">
        position</span>:<span style="color: #0000ff;"> absolute</span>;<span style="color: #ff0000;">
        top</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">  
        left</span>:<span style="color: #0000ff;"> 50%</span>;<span style="color: #ff0000;">  
        margin-top</span>:<span style="color: #0000ff;"> -11px</span>;<span style="color: #ff0000;">  
        margin-left</span>:<span style="color: #0000ff;"> -11px</span>;<span style="color: #ff0000;">
        width</span>:<span style="color: #0000ff;"> 22px</span>;<span style="color: #ff0000;">
        height</span>:<span style="color: #0000ff;"> 22px</span>;<span style="color: #ff0000;">
        border-radius</span>:<span style="color: #0000ff;"> 22px</span>;<span style="color: #ff0000;">
        background-color</span>:<span style="color: #0000ff;"> white</span>;<span style="color: #ff0000;">
        box-shadow</span>:<span style="color: #0000ff;"> 1px 1px 1px 1px rgba(0,0,0,0.08)</span>;<span style="color: #ff0000;">
        -webkit-transform</span>:<span style="color: #0000ff;"> translateX(-9px)</span>;<span style="color: #ff0000;">
        -webkit-transition</span>:<span style="color: #0000ff;"> all 0.3s ease</span>;
    }<span style="color: #800000;">
    .switch:checked~label:after</span>{<span style="color: #ff0000;">
        -webkit-transform</span>:<span style="color: #0000ff;"> translateX(9px)</span>;
    }<span style="color: #800000;">
    
    .switch:checked~label:before</span>{<span style="color: #ff0000;">
        background-color</span>:<span style="color: #0000ff;">green</span>;
    }

登入後複製