recherche

Maison >interface Web >js tutoriel >Bascule Illusion réaliste utilisant le code HTML de base et le code CSS de base

Bascule Illusion réaliste utilisant le code HTML de base et le code CSS de base

Patricia Arquette
Patricia Arquetteoriginal
2024-12-05 19:12:10759parcourir

Toggle Switch Realistic illusion using the core html and core Css Code

<!DOCTYPE html>
<html lang="fr">
<tête>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cartes interactives en verre</title>
  <style>
.changer {
  position : relative ;
  largeur : 210 px ;
  hauteur : 50px ;
  -webkit-box-sizing : bordure-box ;
  dimensionnement de la boîte : bordure-boîte ;
  remplissage : 3 px ;
  arrière-plan : #0d0d0d ;
  rayon de bordure : 6 px ;
  -webkit-box-shadow :
    encart 0 1px 1px 1px rgba(0, 0, 0, 0.5),
    0 1px 0 0 rgba(255, 255, 255, 0,1);
  boîte-ombre :
    encart 0 1px 1px 1px rgba(0, 0, 0, 0.5),
    0 1px 0 0 rgba(255, 255, 255, 0,1);
}
.switch input[type="checkbox"] {
  position : absolue ;
  indice z : 1 ;
  largeur : 100 % ;
  hauteur : 100 % ;
  opacité : 0 ;
  curseur : pointeur ;
}
.switch input[type="checkbox"] étiquette {
  position : relative ;
  affichage : bloc ;
  gauche : 0 ;
  largeur : 50 % ;
  hauteur : 100 % ;
  arrière-plan : #1b1c1c ;
  rayon de bordure : 3 px ;
  -webkit-box-shadow : encart 0 1px 0 0 rgba(255, 255, 255, 0.1) ;
  box-shadow : encart 0 1px 0 0 rgba(255, 255, 255, 0.1);
  -webkit-transition : toutes les entrées et sorties faciles en 0,5 s ;
  transition : toutes les 0,5 s d'entrée et de sortie faciles ;
}
.switch input[type="checkbox"] label:avant {
  contenu: "";
  affichage : bloc en ligne ;
  largeur : 5px ;
  hauteur : 5px ;
  marge gauche : 10 px ;
  arrière-plan : #fff ;
  rayon de bordure : 50 % ;
  alignement vertical : milieu ;
  -webkit-box-shadow :
    0 0 5px 2px rgba(165, 15, 15, 0,9),
    0 0 3px 1px rgba(165, 15, 15, 0,9);
  boîte-ombre :
    0 0 5px 2px rgba(165, 15, 15, 0,9),
    0 0 3px 1px rgba(165, 15, 15, 0,9);
  -webkit-transition : toutes les entrées et sorties faciles en 0,5 s ;
  transition : toutes les 0,5 s d'entrée et de sortie faciles ;
}
.switch input[type="checkbox"] étiquette : après {
  contenu: "";
  affichage : bloc en ligne ;
  largeur : 0 ;
  hauteur : 100 % ;
  alignement vertical : milieu ;
}
.switch input[type="checkbox"] étiquette i {
  affichage : bloc ;
  position : absolue ;
  haut : 50 % ;
  gauche : 50 % ;
  largeur : 3px ;
  hauteur : 24px ;
  marge supérieure : -12 px ;
  marge gauche : -1,5px ;
  rayon de bordure : 2 px ;
  arrière-plan : #0d0d0d ;
  -webkit-box-shadow : 0 1px 0 0 rgba(255, 255, 255, 0.3) ;
  box-shadow : 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
.switch input[type="checkbox"] étiquette i:avant,
.switch input[type="checkbox"] étiquette i:après {
  contenu: "";
  affichage : bloc ;
  position : absolue ;
  largeur : 100 % ;
  hauteur : 100 % ;
  rayon de bordure : 2 px ;
  arrière-plan : #0d0d0d ;
  -webkit-box-shadow : 0 1px 0 0 rgba(255, 255, 255, 0.3) ;
  box-shadow : 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
.switch input[type="checkbox"] étiquette i:avant {
  gauche : -7px ;
}
.switch input[type="checkbox"] étiquette i:après {
  gauche : 7px ;
}
.switch input[type="checkbox"]:étiquette cochée {
  gauche : 50 % ;
}
.switch input[type="checkbox"]:étiquette vérifiée:avant {
  -webkit-box-shadow :
    0 0 5px 2px rgba(15, 165, 70, 0,9),
    0 0 3px 1px rgba(15, 165, 70, 0,9);
  boîte-ombre :
    0 0 5px 2px rgba(15, 165, 70, 0,9),
    0 0 3px 1px rgba(15, 165, 70, 0,9);
}</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!

css html webkit switch checkbox using pointer display position margin padding border viewport background transition 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：Quelle est l’efficacité d’une simple fonction JavaScript pour précharger des images dans les navigateurs modernes ?Article suivant：Quelle est l’efficacité d’une simple fonction JavaScript pour précharger des images dans les navigateurs modernes ?

Articles Liés

Voir plus