Togol Suis Ilusi realistik menggunakan html teras dan Kod Css teras-tutorial js-php.cn

Togol Suis Ilusi realistik menggunakan html teras dan Kod Css teras

Patricia Arquette

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

asal

786 orang telah melayarinya

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

<!DOCTYPE html>
<html lang="en">
<kepala>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Kad Kaca Interaktif</title>
  <gaya>
.suis {
  kedudukan: relatif;
  lebar: 210px;
  ketinggian: 50px;
  -saiz kotak-webkit: kotak sempadan;
  saiz kotak: kotak sempadan;
  padding: 3px;
  latar belakang: #0d0d0d;
  jejari sempadan: 6px;
  -webkit-box-shadow:
    inset 0 1px 1px 1px rgba(0, 0, 0, 0.5),
    0 1px 0 0 rgba(255, 255, 255, 0.1);
  bayang kotak:
    inset 0 1px 1px 1px rgba(0, 0, 0, 0.5),
    0 1px 0 0 rgba(255, 255, 255, 0.1);
}
.switch input[type="checkbox"] {
  jawatan: mutlak;
  indeks-z: 1;
  lebar: 100%;
  ketinggian: 100%;
  kelegapan: 0;
  kursor: penunjuk;
}
.switch input[type="checkbox"] label {
  kedudukan: relatif;
  paparan: blok;
  kiri: 0;
  lebar: 50%;
  ketinggian: 100%;
  latar belakang: #1b1c1c;
  jejari sempadan: 3px;
  -webkit-box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  bayang-kotak: inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  -webkit-transition: semua kemudahan 0.5s-in-out;
  peralihan: semua 0.5s mudah masuk;
}
.tukar input[type="checkbox"] label:sebelum {
  kandungan: "";
  paparan: inline-block;
  lebar: 5px;
  ketinggian: 5px;
  jidar-kiri: 10px;
  latar belakang: #fff;
  jejari sempadan: 50%;
  vertical-align: tengah;
  -webkit-box-shadow:
    0 0 5px 2px rgba(165, 15, 15, 0.9),
    0 0 3px 1px rgba(165, 15, 15, 0.9);
  bayang kotak:
    0 0 5px 2px rgba(165, 15, 15, 0.9),
    0 0 3px 1px rgba(165, 15, 15, 0.9);
  -webkit-transition: semua kemudahan 0.5s-in-out;
  peralihan: semua 0.5s mudah masuk;
}
.switch input[type="checkbox"] label:selepas {
  kandungan: "";
  paparan: inline-block;
  lebar: 0;
  ketinggian: 100%;
  vertical-align: tengah;
}
.switch input[type="checkbox"] label i {
  paparan: blok;
  jawatan: mutlak;
  atas: 50%;
  kiri: 50%;
  lebar: 3px;
  ketinggian: 24px;
  jidar atas: -12px;
  jidar-kiri: -1.5px;
  jejari sempadan: 2px;
  latar belakang: #0d0d0d;
  -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
  bayang-kotak: 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
.switch input[type="checkbox"] label i:before,
.switch input[type="checkbox"] label i:selepas {
  kandungan: "";
  paparan: blok;
  jawatan: mutlak;
  lebar: 100%;
  ketinggian: 100%;
  jejari sempadan: 2px;
  latar belakang: #0d0d0d;
  -webkit-box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3);
  bayang-kotak: 0 1px 0 0 rgba(255, 255, 255, 0.3);
}
.switch input[type="checkbox"] label i:before {
  kiri: -7px;
}
.switch input[type="checkbox"] label i:selepas {
  kiri: 7px;
}
.switch input[type="checkbox"]:label yang ditanda {
  kiri: 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);
  bayang kotak:
    0 0 5px 2px rgba(15, 165, 70, 0.9),
    0 0 3px 1px rgba(15, 165, 70, 0.9);
}</style>
</head>
<badan>
  <div>

Salin selepas log masuk

Atas ialah kandungan terperinci Togol Suis Ilusi realistik menggunakan html teras dan Kod Css teras. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!