Maison > interface Web > tutoriel CSS > le corps du texte

Un ensemble de magnifiques boutons de commutation coulissants CSS3 purs

黄舟
Libérer: 2017-01-18 13:28:08
original
2218 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

.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) !


Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal