suchen

Heim >Web-Frontend >js-Tutorial >Toggle Switch Realistische Illusion mit dem Kern-HTML- und Kern-CSS-Code

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

Patricia Arquette
Patricia ArquetteOriginal
2024-12-05 19:12:10767Durchsuche

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>

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!

css html webkit switch checkbox using pointer display position margin padding border viewport background transition input
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：Wie effektiv ist eine einfache JavaScript-Funktion zum Vorladen von Bildern in modernen Browsern?Nächster Artikel：Wie effektiv ist eine einfache JavaScript-Funktion zum Vorladen von Bildern in modernen Browsern?

In Verbindung stehende Artikel

Mehr sehen