Comment utiliser du CSS pur pour implémenter le contrôle de l'interrupteur d'alimentation (code source ci-joint)

Le contenu de cet article explique comment utiliser du CSS pur pour implémenter le contrôle de l'interrupteur d'alimentation (code source ci-joint). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. toi. .

Aperçu de l'effet

Téléchargement du code source

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

Interprétation du code

Définissez dom, qui contient 3 éléments, représentant input commandes, interrupteurs et lumières :

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

Affichage centré :

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

Définissez le style du contrôle et définissez-le sur transparent afin qu'il soit invisible mais puisse toujours interagir avec l'utilisateur. La taille de la police est une variable, car la taille de la police du contrôle input est différente de la taille du texte, elle doit donc être définie séparément :

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

Définissez le contour du commutateur :

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

Utilisez l'ombre pour que le commutateur devienne tridimensionnel :

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

Utilisez des pseudo-éléments pour définir le texte on et off, qui se trouve actuellement dans le 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);
}

Définissez le contrôle input sur checked state pour définir le style du on state :

<input>

Définissez le style de commutation du on état :

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

Définissez le style de commutation de l'état on Style de texte :

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

Définissez ensuite l'effet d'éclairage.
Définissez d'abord l'effet sombre dans l'état off :

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

Ensuite, définissez l'effet lumineux dans l'état on :

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

Vous avez terminé !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!