源代码下载

    https://github.com/comehope/front-end-daily-challenges

    代码解读

    定义dom，包含3个元素，分别代表input控件、开关和灯光：

    <inputtype="checkbox"class="toggle">

    <divclass="switch"></div>

    <divclass="light"></div>

    居中显示：

    body{

    margin:0;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    background-color:#eee;

    }

    定义控件的样式，把控件的设置为透明，使其不可见，但仍可与用户交互。其中字号大小是变量，因为input控件的字号与正文字号不同，所以需要单独设置：

    body{

    font-size:var(--font-size);

    }

    :root{

    --font-size:16px;

    }

    .toggle{

    position:absolute;

    font-size:var(--font-size);

    width:5em;

    height:8em;

    margin:0;

    filter:opacity(0);

    cursor:pointer;

    z-index:2;

    }

    设置开关的轮廓：

    .switch{

    position:absolute;

    width:5em;

    height:8em;

    border-radius:1.2em;

    background:linear-gradient(#d2d4d6,white);

    }

    用阴影使开关变得立体：

    .switch{

    box-shadow:

    inset0-0.2em0.4emrgba(212,212,212,0.75),

    inset0-0.8em00.1emrgba(156,156,156,0.85),

    0000.1emrgba(116,116,116,0.8),

    00.6em0.6emrgba(41,41,41,0.3),

    0000.4em#d4d7d8;

    }

    用伪元素设置on和off文本，目前是处于off状态：

    .toggle~.switch::before,

    .toggle~.switch::after{

    position:absolute;

    width:100%;

    text-align:center;

    font-size:1.4em;

    font-family:sans-serif;

    text-transform:uppercase;

    }

    .toggle~.switch::before{

    content:'|';

    bottom:1em;

    color:rgba(0,0,0,0.5);

    text-shadow:00.1em0rgba(255,255,255,0.8);

    }

    .toggle~.switch::after{

    content:'O';

    top:0.6em;

    color:rgba(0,0,0,0.45);

    text-shadow:00.1em0rgba(255,255,255,0.4);

    }

    把input控件设置为checked状态，以便设置处于on状态的样式：

    <inputtype="checkbox"checked="checked"class="toggle">

    设置处于on状态的开关样式：

    .toggle:checked~.switch{

    background:linear-gradient(#a1a2a3,#f0f0f0);

    box-shadow:

    inset00.2em0.4emrgba(212,205,199,0.75),

    inset00.8em00.1emrgba(255,255,255,0.77),

    0000.1emrgba(116,116,118,0.8),

    0-0.2em0.2emrgba(41,41,41,0.18),

    0000.4em#d4d7d8;

    }

    设置处于on状态的文本样式：

    .toggle:checked~.switch::before{

    bottom:0.3em;

    text-shadow:00.1em0rgba(255,255,255,0.5);

    }

    .toggle:checked~.switch::after{

    top:1.2em;

    text-shadow:00.1em0rgba(255,255,255,0.15);

    }

    接下来设置灯光效果。

    先设置处于off状态的黑暗效果：

    .toggle~.light{

    width:100vw;

    height:100vh;

    background-color:#0a0a16;

    z-index:1;

    filter:opacity(0.7);

    }

    再设置处于on状态的明亮效果：

    .toggle:checked~.light{

    filter:opacity(0);

    }

    大功告成！






本文转载自中文网