Bascule Illusion réaliste utilisant le code HTML de base et le code CSS de base-js tutoriel-php.cn

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

Patricia Arquette

Libérer： 2024-12-05 19:12:10

original

793 Les gens l'ont consulté

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>

Copier après la connexion

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!