How to use pure CSS to implement power switch control (source code attached)-CSS Tutorial-php.cn

How to use pure CSS to implement power switch control (source code attached)

不言

Release： 2018-09-27 16:07:51

Original

3110 people have browsed it

The content of this article is about how to use pure CSS to implement power switch control (source code attached). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you. .

Effect preview

How to use pure CSS to implement power switch control (source code attached)

##Source code download

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

Code Interpretation

Define dom, containing 3 elements, representing

input controls, switches and lights respectively ：

Copy after login

Centered display:

body {
    margin: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #eee;
}

Copy after login

Define the style of the control and set the control to transparent so that it is invisible but can still interact with the user. The font size is a variable, because the font size of the

input control is different from the text size, so it needs to be set separately:

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

Copy after login

Set the outline of the switch:

.switch {
    position: absolute;
    width: 5em;
    height: 8em;
    border-radius: 1.2em;
    background: linear-gradient(#d2d4d6, white);
}

Copy after login

Use shadow to make the switch Become three-dimensional:

.switch {
    box-shadow: 
        inset 0 -0.2em 0.4em rgba(212, 212, 212, 0.75), 
        inset 0 -0.8em 0 0.1em rgba(156, 156, 156, 0.85), 
        0 0 0 0.1em rgba(116, 116, 116, 0.8), 
        0 0.6em 0.6em rgba(41, 41, 41, 0.3), 
        0 0 0 0.4em #d4d7d8;
}

Copy after login

Use pseudo elements to set the

on and off text. It is currently in the off state:

.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: 0 0.1em 0 rgba(255, 255, 255, 0.8);
}

.toggle ~ .switch::after {
    content: 'O';
    top: 0.6em;
    color: rgba(0, 0, 0, 0.45);
    text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.4);
}

Copy after login

Set the

input control to the checked state to set the style in the on state:

Copy after login

Set the

on State switch style:

.toggle:checked ~ .switch {
    background: linear-gradient(#a1a2a3, #f0f0f0);
    box-shadow: 
        inset 0 0.2em 0.4em rgba(212, 205, 199, 0.75), 
        inset 0 0.8em 0 0.1em rgba(255, 255, 255, 0.77), 
        0 0 0 0.1em rgba(116, 116, 118, 0.8), 
        0 -0.2em 0.2em rgba(41, 41, 41, 0.18), 
        0 0 0 0.4em #d4d7d8;
}

Copy after login

Set the text style in the

on state:

.toggle:checked ~ .switch::before {
    bottom: 0.3em;
    text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.5);
}

.toggle:checked ~ .switch::after {
    top: 1.2em;
    text-shadow: 0 0.1em 0 rgba(255, 255, 255, 0.15);
}

Copy after login

Next set the lighting effect.

First set the dark effect in the
off state:

.toggle ~ .light {
    width: 100vw;
    height: 100vh;
    background-color: #0a0a16;
    z-index: 1;
    filter: opacity(0.7);
}

Copy after login

Then set the bright effect in the

on state:

.toggle:checked ~ .light {
    filter: opacity(0);
}

Copy after login

Done!

The above is the detailed content of How to use pure CSS to implement power switch control (source code attached). For more information, please follow other related articles on the PHP Chinese website!