Bagaimana untuk membuat togol menggunakan HTML dan CSS?-tutorial css-php.cn

Bagaimana untuk membuat togol menggunakan HTML dan CSS?

WBOY

Lepaskan： 2023-08-25 18:02:09

ke hadapan

1561 orang telah melayarinya

如何使用 HTML 和 CSS 创建切换开关？

Dalam HTML dan CSS, togol suis ialah elemen antara muka pengguna grafik yang membolehkan pengguna bertukar antara dua keadaan (biasanya "hidup" dan "mati"). Suis togol dibuat dengan menggunakan elemen input HTML jenis "kotak semak" dan elemen label yang sepadan dengan penggayaan CSS. Elemen label digayakan untuk memaparkan keadaan "hidup" apabila input dipilih dan untuk memaparkan keadaan "mati" apabila input tidak dipilih.

Jika kami ingin menambahkan ciri interaktif yang menarik pada tapak web kami, togol ialah pilihan yang bagus. Di sini, kami akan meneroka cara membuat togol menggunakan HTML dan CSS.

Langkah pertama dalam mencipta suis togol ialah mencipta struktur asas suis menggunakan HTML. Kita boleh mencapai ini dengan menggunakan elemen div sebagai bekas dan menambah dua elemen input untuk mewakili keadaan hidup/mati suis.

Kod HTML

Ini adalah sekeping kod HTML.

<html>
   <body>
      <h3>Toggle Switch Example</h3>
      <div class="toggle">
         <input type="checkbox" id="toggle-checkbox" class="togglecheckbox">
         <label for="toggle-checkbox" class="toggle-label"></label>
      </div>
   </body>
</html>

Salin selepas log masuk

Kini, kita perlu menggayakan suis togol menggunakan CSS. Mulakan dengan menetapkan sifat paparan div kontena kepada "blok sebaris" dan tetapkan lebar dan tinggi suis kepada saiz yang sesuai untuk tapak web atau aplikasi anda. Kami juga menggunakan sifat jejari sempadan untuk mencipta bentuk bulat untuk suis.

Kami akan menambah elemen pseudo pada elemen label dan menetapkan kandungannya kepada rentetan kosong. Kami juga akan memberikannya warna latar belakang dan meletakkannya sepenuhnya di dalam bekas. Dengan kotak pilihan dipilih, kami mengalihkan elemen pseudo ke kanan untuk menunjukkan keadaan hidup suis togol.

Dengan menggunakan pemilih :checked dalam CSS, kami boleh menukar kedudukan warna latar belakang putih apabila suis dihidupkan, mewujudkan peralihan yang lancar dan menarik secara visual. Kami juga boleh menyesuaikan penampilan suis menggunakan sifat CSS lain seperti warna latar belakang, saiz fon dan penjajaran teks.

Kod CSS

Berikut ialah kod CSS.

<style>
   body{
      text-align:center;
   }
   .toggle {
      display: inline-block;
      width: 80px;
      height: 38px;
      background-color: #8eeb60;
      border-radius: 40px;
      position: relative;
      overflow: hidden;
   }
   .toggle input[type="checkbox"] {
      display: none;
   }
   .toggle-label {
      display: block;
      overflow: hidden;
      cursor: pointer;
      border-radius: 34px;
   }
   .toggle-label:before {
      content: "";
      display: block;
      width: 100%;
      height: 100%;
      background-color: red;
      border-radius: 34px;
      position: absolute;
      top: 0;
      left: 0;
      transition: all 0.25s ease-in-out;
   }
   .toggle-checkbox:checked+.toggle-label:before {
      transform: translateX(35px);
   }
</style>

Salin selepas log masuk

Contoh 1

Berikut ialah contoh mencipta suis togol menggunakan HTML dan CSS.

<html>
<head>
    <style>
    body{
        text-align:center;
    }
    .toggle {
        display: inline-block;
        width: 80px;
        height: 38px;
        background-color: #8eeb60;
        border-radius: 40px;
        position: relative;
        overflow: hidden;
    }
    .toggle input[type="checkbox"] {
        display: none;
    }
    .toggle-label {
        display: block;
        overflow: hidden;
        cursor: pointer;
        border-radius: 34px;
    }
    .toggle-label:before {
        content: "";
        display: block;
        width: 100%;
        height: 100%;
        background-color: red;
        border-radius: 34px;
        position: absolute;
        top: 0;
        left: 0;
        transition: all 0.25s ease-in-out;
    }
    .toggle-checkbox:checked+.toggle-label:before {
        transform: translateX(35px);
    }
    </style>
</head>
<body>
    <h3>Toggle Switch Example</h3>
    <div class="toggle">
        <input type="checkbox" id="toggle-checkbox" class="toggle-checkbox">
        <label for="toggle-checkbox" class="toggle-label"></label>
    </div>
</body>
</html>

Salin selepas log masuk

Contoh 2

Berikut ialah satu lagi contoh mencipta suis togol dengan bantuan HTML dan CSS.

<html>
<head>
   <style>
      body{
         text-align:center;
      }
      .toggle {
         position: relative;
         display: block;
         width: 100px;
         height: 40px;
         padding: 3px;
         margin: auto;
         border-radius: 50px;
         cursor: pointer;
      }
      .toggle-input {
         position: absolute;
         top: 0;
         left: 0;
         opacity: 0;
      }
      .toggle-label {
         position: relative;
         display: block;
         height: inherit;
         font-size: 12px;
         background: red;
         border-radius: inherit;
         box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.12), inset 0 0 3px
         rgba(0, 0, 0, 0.15);
      }
      .toggle-label:before,
      .toggle-label:after {
         position: absolute;
         top: 50%;
         color: black;
         margin-top: -.5em;
         line-height: 1;
      }
      .toggle-label:before {
         content: attr(data-off);
         right: 11px;
         color: #fff;
         text-shadow: 0 1px rgba(255, 255, 255, 0.5);
      }
      .toggle-label:after {
         content: attr(data-on);
         left: 11px;
         color: #fff;
         text-shadow: 0 1px rgba(0, 0, 0, 0.2);
         opacity: 0;
      }
      .toggle-input:checked~.toggle-label {
         background: green;
      }
      .toggle-input:checked~.toggle-label:before {
         opacity: 0;
      }
      .toggle-input:checked~.toggle-label:after {
         opacity: 1;
      }
      .toggle-handle {
         position: absolute;
         top: 4px;
         left: 4px;
         width: 38px;
         height: 38px;
         background: linear-gradient(to bottom, #FFFFFF 40%, #f0f0f0);
         border-radius: 50%;
      }
      .toggle-handle:before {
         position: absolute;
         top: 50%;
         left: 50%;
         margin: -6px 0 0 -6px;
         width: 16px;
         height: 16px;
      }
      .toggle-input:checked~.toggle-handle {
         left: 64px;
         box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
      }

      /* Transition*/
      .toggle-label,
      .toggle-handle {
         transition: All 0.3s ease;
         -webkit-transition: All 0.3s ease;
         -moz-transition: All 0.3s ease;
         -o-transition: All 0.3s ease;
      }
   </style>
</head>
   <body>
      <h3>Toggle Switch by using HTML and CSS</h3>
      <label class="toggle">
         <input class="toggle-input" type="checkbox" />
         <span class="toggle-label" data-off="OFF" data-on="ON"></span>
         <span class="toggle-handle"></span>
      </label>
   </body>
</html>

Salin selepas log masuk

Kesimpulan

Mencipta togol menggunakan HTML dan CSS ialah proses mudah yang boleh menambah banyak nilai pada tapak web atau apl anda. Dengan mengikuti langkah-langkah ini dan bereksperimen dengan sifat CSS yang berbeza, kami boleh mencipta togol yang unik, menarik secara visual dan mudah digunakan.

Atas ialah kandungan terperinci Bagaimana untuk membuat togol menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!