recherche

Maison >interface Web >js tutoriel >Basculer les commutateurs en utilisant HTML CSS et Javascript

Basculer les commutateurs en utilisant HTML CSS et Javascript

Patricia Arquette
Patricia Arquetteoriginal
2024-12-05 14:20:13912parcourir

Toggle Switches fun using html css and javascript

<!DOCTYPE html>
<html lang="fr">
<tête>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Commutateurs à bascule avec logique</title>
    <style>
        corps {
            affichage : flexible ;
            direction flexible : colonne ;
            align-items : centre ;
            justifier-contenu : centre ;
            hauteur : 100vh ;
            couleur d'arrière-plan : #121212 ;
            couleur : #fff ;
            famille de polices : Arial, sans empattement ;
        }
        .toggle-conteneur {
            affichage : flexible ;
            align-items : centre ;
            marge : 20px 0 ;
        }
        .toggle-étiquette {
            marge gauche : 10 px ;
            taille de police : 1,2rem ;
            couleur d'arrière-plan : RVB (64, 109, 94) ;
            remplissage : 5 px ;

        }
        .changer {
            position : relative ;
            affichage : bloc en ligne ;
            largeur : 50 px ;
            hauteur : 25px ;
        }
        .switch entrée {
            opacité : 0 ;
            largeur : 0 ;
            hauteur : 0 ;
        }
        .curseur {
            position : absolue ;
            curseur : pointeur ;
            haut : 0 ;
            gauche : 0 ;
            à droite : 0 ;
            bas : 0 ;
            couleur d'arrière-plan : #555 ;
            rayon de bordure : 25 px ;
            transition : 0,4 s ;
        }
        .slider :avant {
            position : absolue ;
            contenu: "";
            hauteur : 20px ;
            largeur : 20 px ;
            gauche : 3px ;
            bas : 2,5 px ;
            couleur de fond : blanc ;
            rayon de bordure : 50 % ;
            transition : 0,4 s ;
        }
        entrée : vérifié .slider {
            couleur d'arrière-plan : #4caf50 ;
        }
        entrée : vérifié .slider : avant {
            transformer : traduireX(24px);
        }
        .boîte{
            hauteur : 250px ;
            largeur : 300 px ;
            couleur d'arrière-plan : RVB (8, 72, 51) ;
            rayon de bordure : 10 px ;
            remplissage : 5 px ;
        }
    </style>
&Lt;/tête>
<corps>
    <div>

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!

JavaScript css html switch using pointer display position margin padding border viewport background transform transition column flex input
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment supprimer un écouteur d'événement de sa propre définition en JavaScript ?Article suivant：Comment supprimer un écouteur d'événement de sa propre définition en JavaScript ?

Articles Liés

Voir plus