Ein Satz wunderschöner reiner CSS3-Schiebeschaltertasten

Kurzes Tutorial

Dies ist eine Reihe exquisiter Schiebeschalter-Tasteneffekte, die mit CSS3 erstellt wurden. Dieser Satz Schiebeschaltflächen ist entsprechend der Szenarioklasse von Bootstrap konzipiert und kann an fünf verschiedene Szenarien sowie an einen Nichtverfügbarkeitsstatus angepasst werden.

So verwenden Sie die

HTML-Struktur

Die grundlegende HTML-Struktur des Sliding-Button-Effekts verwendet ein dc6dce4a544fdca2df29d5ac0ea9906b-Element, um ein d5fd7aea971a85678ba271703566ebfd-Element zu umschließen ; label>

<div class="switch-box">
  <input id="default" class="switch-box-input" type="checkbox" />
  <label for="default" class="switch-box-slider"></label>
  <label for="default" class="switch-box-label">Default</label>
</div>

CSS-Stil

Das erste 2e1cf0710519d5598b1f0f14c36ba674-Element.switch-box-slider wird verwendet, um die Schiebeachse des Schiebeknopfs zu erstellen. Das ::after-Pseudoelement des

.switch-box .switch-box-slider {
  position: relative;
  display: inline-block;
  height: 8px;
  width: 32px;
  background: #d5d5d5;
  border-radius: 8px;
  cursor: pointer;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

.switch-box-slider-Elements wird zum Erstellen eines kreisförmigen Schiebereglers verwendet.

.switch-box .switch-box-slider:after {
  position: absolute;
  left: -8px;
  top: -8px;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #eeeeee;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.2);
  content: '';
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

Wenn sich das .switch-box-input-Element im aktivierten Zustand befindet, wird das linke Attribut des :after-Pseudoelements von .switch-box-slider geändert und der kreisförmige Schieberegler verschoben.

.switch-box .switch-box-input ~ .switch-box-label {
  margin-left: 8px;
}
.switch-box .switch-box-input:checked ~ .switch-box-slider:after {
  left: 16px;
}

Das Obige ist der Inhalt einer Reihe exquisiter reiner CSS3-Schiebeschalter. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!