Ein Satz wunderschöner reiner CSS3-Schiebeschaltertasten-CSS-Tutorial-php.cn

Ein Satz wunderschöner reiner CSS3-Schiebeschaltertasten

黄舟

Freigeben： 2017-01-18 13:28:08

Original

2246 Leute haben es durchsucht

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

-Element, um ein -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>

Nach dem Login kopieren

CSS-Stil

Das erste -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;
}

Nach dem Login kopieren

.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: &#39;&#39;;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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