Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

不言
Freigeben: 2018-09-27 16:07:51
Original
3313 Leute haben es durchsucht

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

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


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>
Nach dem Login kopieren

Zentrierte Anzeige:

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

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;
}
Nach dem Login kopieren

Legen Sie den Umriss des Schalters fest:

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

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;
}
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

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

<input>
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

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);
}
Nach dem Login kopieren

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

.toggle:checked ~ .light {
    filter: opacity(0);
}
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage