Toggle Switch Realistische Illusion mit dem Kern-HTML- und Kern-CSS-Code-js-Tutorial-php.cn

Toggle Switch Realistische Illusion mit dem Kern-HTML- und Kern-CSS-Code

Patricia Arquette

Freigeben： 2024-12-05 19:12:10

Original

763 Leute haben es durchsucht

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

<!DOCTYPE html>
<html lang="de">
<Kopf>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Interaktive Glaskarten</title>
  <Stil>
.schalten {
  Position: relativ;
  Breite: 210px;
  Höhe: 50px;
  -webkit-box-sizing: border-box;
  Boxgröße: border-box;
  Polsterung: 3px;
  Hintergrund: #0d0d0d;
  Randradius: 6px;
  -webkit-box-shadow:
    Einschub 0 1px 1px 1px rgba(0, 0, 0, 0,5),
    0 1px 0 0 rgba(255, 255, 255, 0,1);
  Kastenschatten:
    Einschub 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: absolut;
  Z-Index: 1;
  Breite: 100 %;
  Höhe: 100 %;
  Deckkraft: 0;
  Cursor: Zeiger;
}
.switch input[type="checkbox"] label {
  Position: relativ;
  Anzeige: Block;
  links: 0;
  Breite: 50 %;
  Höhe: 100 %;
  Hintergrund: #1b1c1c;
  Randradius: 3px;
  -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  -webkit-transition: alle 0,5 s Easy-in-out;
  Übergang: alle 0,5 s Ease-in-out;
}
.switch input[type="checkbox"] label:before {
  Inhalt: "";
  Anzeige: Inline-Block;
  Breite: 5px;
  Höhe: 5px;
  Rand links: 10px;
  Hintergrund: #fff;
  Randradius: 50 %;
  vertikal ausrichten: Mitte;
  -webkit-box-shadow:
    0 0 5px 2px rgba(165, 15, 15, 0,9),
    0 0 3px 1px rgba(165, 15, 15, 0,9);
  Kastenschatten:
    0 0 5px 2px rgba(165, 15, 15, 0,9),
    0 0 3px 1px rgba(165, 15, 15, 0,9);
  -webkit-transition: alle 0,5 s Easy-in-out;
  Übergang: alle 0,5 s Ease-in-out;
}
.switch input[type="checkbox"] label:after {
  Inhalt: "";
  Anzeige: Inline-Block;
  Breite: 0;
  Höhe: 100 %;
  vertikal ausrichten: Mitte;
}
.switch input[type="checkbox"] label i {
  Anzeige: Block;
  Position: absolut;
  oben: 50 %;
  links: 50 %;
  Breite: 3px;
  Höhe: 24px;
  Rand oben: -12px;
  Rand links: -1,5px;
  Randradius: 2px;
  Hintergrund: #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"] label i:before,
.switch input[type="checkbox"] label i:after {
  Inhalt: "";
  Anzeige: Block;
  Position: absolut;
  Breite: 100 %;
  Höhe: 100 %;
  Randradius: 2px;
  Hintergrund: #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"] label i:before {
  links: -7px;
}
.switch input[type="checkbox"] label i:after {
  links: 7px;
}
.switch input[type="checkbox"]:checked label {
  links: 50 %;
}
.switch input[type="checkbox"]:checked label:before {
  -webkit-box-shadow:
    0 0 5px 2px rgba(15, 165, 70, 0,9),
    0 0 3px 1px rgba(15, 165, 70, 0,9);
  Kastenschatten:
    0 0 5px 2px rgba(15, 165, 70, 0,9),
    0 0 3px 1px rgba(15, 165, 70, 0,9);
}</style>
</head>
<Körper>
  <div>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonToggle Switch Realistische Illusion mit dem Kern-HTML- und Kern-CSS-Code. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!