Exemple d'analyse de la façon dont CSS implémente les commutateurs dans les téléphones mobiles

Dans de nombreux dessins de conception, il y aura des commutateurs ou des sélections radio comme indiqué ci-dessous. Aujourd'hui, je vais parler de la façon d'utiliser CSS pour implémenter des commutateurs dynamiques.

Dans le code html, c'est très simple

<input type="checkbox" id="1" class="checkbox">
<label class="switch" for="1"></label>

Ce qui suit est notre code CSS

<style>
    .checkbox {
        display: none;
    }
    .switch {
        width: 50px;
        height: 31px;
        background: #56ACFE;
        border-radius: 20px;
        padding: 1px;
        box-sizing: border-box;
        display: inline-block;
        margin-top: 15px;
    }
    .switch:after {
        content: &#39;&#39;;
        box-shadow: 0 3px 8px 0 rgba(0,0,0,0.15), 0 1px 1px 0 rgba(0,0,0,0.16), 0 3px 1px 0 rgba(0,0,0,0.10);
        width: 28px;
        height: 28px;
        background: #fff;
        border-radius: 50%;
        display: block;
        margin-left: 1px;
        float: left;
        transition: all 0.5s;
    }
    .checkbox:checked+.switch:after {
        margin-left: 20px;
    }
    .checkbox:checked+.switch {
        background: #ccc;
    }
</style>

De cette manière, le changement qui apparaît souvent sur le dessin de conception et sur le téléphone mobile est réalisé.

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!