Un ensemble de magnifiques boutons de commutation coulissants CSS3 purs-tutoriel CSS-php.cn

Un ensemble de magnifiques boutons de commutation coulissants CSS3 purs

黄舟

Libérer： 2017-01-18 13:28:08

original

2203 Les gens l'ont consulté

Bref tutoriel

Il s'agit d'un ensemble d'effets de boutons de commutation coulissants exquis réalisés à l'aide de CSS3. Cet ensemble de boutons coulissants est conçu selon la classe de scénario de Bootstrap et peut s'adapter à 5 scénarios différents, ainsi qu'à un état indisponible.

Comment utiliser la

structure HTML

La structure HTML de base de l'effet de bouton coulissant utilise un élément

; étiquette>

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

Copier après la connexion

Style CSS

Le premier element.switch-box-slider est utilisé pour créer l'axe de glissement du bouton coulissant. Le pseudo-élément ::after de l'élément

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

Copier après la connexion

.switch-box-slider est utilisé pour créer un curseur circulaire.

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

Copier après la connexion

Lorsque l'élément .switch-box-input est à l'état coché, l'attribut gauche du pseudo-élément :after de .switch-box-slider est modifié et le curseur circulaire est déplacé .

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

Copier après la connexion

Ce qui précède est le contenu d'un ensemble de boutons de commutation coulissants CSS3 purs et exquis. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !