cari

Rumah >hujung hadapan web >tutorial js >Togol Suis Ilusi realistik menggunakan html teras dan Kod Css teras

Togol Suis Ilusi realistik menggunakan html teras dan Kod Css teras

Patricia Arquette
Patricia Arquetteasal
2024-12-05 19:12:10759semak imbas

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>

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!

css html webkit switch checkbox using pointer display position margin padding border viewport background transition input
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Sejauh manakah Fungsi JavaScript Mudah untuk Pramuat Imej dalam Penyemak Imbas Moden?Artikel seterusnya：Sejauh manakah Fungsi JavaScript Mudah untuk Pramuat Imej dalam Penyemak Imbas Moden?

Artikel berkaitan

Lihat lagi