So verwenden Sie reines CSS zur Implementierung der Netzschaltersteuerung (Quellcode beigefügt)

Der Inhalt dieses Artikels befasst sich mit der Verwendung von reinem CSS zur Implementierung der Netzschaltersteuerung (Quellcode beigefügt). Ich hoffe, dass er hilfreich ist Du. .

Effektvorschau

Quellcode-Download

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

Code-Interpretation

Dom definieren, das 3 Elemente enthält, die input Bedienelemente, Schalter und Lichter darstellen:

<input>
<div></div>
<div></div>

Zentrierte Anzeige:

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

definiert den Stil des Steuerelements und setzt das Steuerelement auf transparent, sodass es unsichtbar ist, aber dennoch mit dem Benutzer interagieren kann. Die Schriftgröße ist eine Variable, da sich die Schriftgröße des input-Steuerelements von der Textgröße unterscheidet und daher separat festgelegt werden muss:

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

Legen Sie den Umriss des Schalters fest:

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

Verwenden Sie Schatten, um den Schalter dreidimensional zu gestalten:

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

verwendet Pseudoelemente, um den on- und off-Text festzulegen, der sich derzeit im off-Zustand befindet:

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

setzt das input-Steuerelement auf den checked-Zustand, sodass die Einstellungen im on-Zustandsstil sind:

<input>

Stellen Sie den Schalterstil auf den on-Zustand ein:

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

Legen Sie den Textstil im on-Zustand fest:

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

Weiter Lichteffekte einstellen.
Stellen Sie zuerst den dunklen Effekt in den off-Zustand:

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

Stellen Sie dann den hellen Effekt in den on-Zustand ein:

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

Fertig!

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reines CSS zur Implementierung der Netzschaltersteuerung (Quellcode beigefügt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!