如何使用纯CSS实现电源开关控件

2024-01-17 13:45 小编
    源代码下载
    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);
    }
    大功告成!


Tag: 如何
在线咨询 拨打电话

电话

13363039260

微信二维码

微信二维码