css3 implements switch switch effect

Ali asked a question during the interview before, and I took the time to make a demo today.

html structure

    <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 code, :before is responsible for color, :after is the small white dot, and the transition effect during switching is implemented with CSS3 animation.

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