CSS3는 스위치 스위치 효과를 구현합니다.

이전 인터뷰에서 알리가 질문을 했는데, 오늘은 데모를 만들어보는 시간을 가졌습니다.

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