Wie erstelle ich einen Umschalter mit HTML und CSS?-CSS-Tutorial-php.cn

Inhaltsverzeichnis

HTML-Code

CSS-Code

Beispiel 2

Fazit

Heim

Web-Frontend

CSS-Tutorial

Wie erstelle ich einen Umschalter mit HTML und CSS?

Aug 25, 2023 pm 06:02 PM

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

In HTML und CSS ist ein Kippschalter ein grafisches Benutzeroberflächenelement, das es dem Benutzer ermöglicht, zwischen zwei Zuständen zu wechseln (normalerweise „Ein“ und „Aus“). Kippschalter werden durch die Verwendung eines HTML-Eingabeelements vom Typ „Checkbox“ und eines entsprechenden Label-Elements mit CSS-Stil erstellt. Das Label-Element ist so gestaltet, dass es den Status „Ein“ anzeigt, wenn der Eingang ausgewählt ist, und das Label-Element ist so gestaltet, dass es den Status „Aus“ anzeigt, wenn der Eingang nicht ausgewählt ist.

Wenn wir unserer Website coole interaktive Funktionen hinzufügen möchten, sind Umschalter eine gute Wahl. Hier erfahren Sie, wie Sie mithilfe von HTML und CSS einen Umschalter erstellen.

Der erste Schritt beim Erstellen eines Kippschalters besteht darin, die Grundstruktur des Schalters mithilfe von HTML zu erstellen. Dies können wir erreichen, indem wir ein div-Element als Container verwenden und zwei Eingabeelemente hinzufügen, um den Ein-/Aus-Zustand des Schalters darzustellen.

HTML-Code

Dies ist ein Stück HTML-Code.

&lt;html&gt;
   &lt;body&gt;
      &lt;h3&gt;Toggle Switch Example&lt;/h3&gt;
      &lt;div class="toggle"&gt;
         &lt;input type="checkbox" id="toggle-checkbox" class="togglecheckbox"&gt;
         &lt;label for="toggle-checkbox" class="toggle-label"&gt;&lt;/label&gt;
      &lt;/div&gt;
   &lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

Jetzt müssen wir den Kippschalter mit CSS formatieren. Setzen Sie zunächst die Anzeigeeigenschaft des Container-Div auf „inline-block“ und stellen Sie die Breite und Höhe des Schalters auf eine für Ihre Website oder Anwendung geeignete Größe ein. Wir verwenden auch die Eigenschaft border-radius, um eine kreisförmige Form für den Schalter zu erstellen.

Wir fügen dem Label-Element ein Pseudoelement hinzu und setzen dessen Inhalt auf eine leere Zeichenfolge. Wir werden ihm außerdem eine Hintergrundfarbe geben und es vollständig innerhalb des Containers positionieren. Wenn das Kontrollkästchen aktiviert ist, verschieben wir das Pseudoelement nach rechts, um den Ein-Zustand des Kippschalters anzuzeigen.

Durch die Verwendung des :checked-Selektors in CSS können wir die Position der weißen Hintergrundfarbe ändern, wenn der Schalter aktiviert ist, und so einen sanften und optisch ansprechenden Übergang erzeugen. Wir können das Erscheinungsbild des Schalters auch mithilfe anderer CSS-Eigenschaften wie Hintergrundfarbe, Schriftgröße und Textausrichtung anpassen.

CSS-Code

Hier ist der CSS-Code.

&lt;style&gt;
   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);
   }
&lt;/style&gt;

Nach dem Login kopieren

Beispiel 1

Hier ist ein Beispiel für die Erstellung eines Kippschalters mit HTML und CSS.

&lt;html&gt;
&lt;head&gt;
    &lt;style&gt;
    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);
    }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h3&gt;Toggle Switch Example&lt;/h3&gt;
    &lt;div class="toggle"&gt;
        &lt;input type="checkbox" id="toggle-checkbox" class="toggle-checkbox"&gt;
        &lt;label for="toggle-checkbox" class="toggle-label"&gt;&lt;/label&gt;
    &lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

Beispiel 2

Hier ist ein weiteres Beispiel für die Erstellung eines Kippschalters mit Hilfe von HTML und CSS.

&lt;html&gt;
&lt;head&gt;
   &lt;style&gt;
      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;
      }
   &lt;/style&gt;
&lt;/head&gt;
   &lt;body&gt;
      &lt;h3&gt;Toggle Switch by using HTML and CSS&lt;/h3&gt;
      &lt;label class="toggle"&gt;
         &lt;input class="toggle-input" type="checkbox" /&gt;
         &lt;span class="toggle-label" data-off="OFF" data-on="ON"&gt;&lt;/span&gt;
         &lt;span class="toggle-handle"&gt;&lt;/span&gt;
      &lt;/label&gt;
   &lt;/body&gt;
&lt;/html&gt;

Nach dem Login kopieren

Fazit

Das Erstellen eines Umschalters mit HTML und CSS ist ein einfacher Vorgang, der Ihrer Website oder App viel Wert verleihen kann. Indem wir diese Schritte befolgen und mit verschiedenen CSS-Eigenschaften experimentieren, können wir einen einzigartigen, optisch ansprechenden und benutzerfreundlichen Kippschalter erstellen.

Das obige ist der detaillierte Inhalt vonWie erstelle ich einen Umschalter mit HTML und CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website

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