Stylisation des cases à cocher animées avec CSS

Introduction

Dans ce laboratoire, nous allons apprendre à utiliser CSS pour créer des cases à cocher personnalisées avec une animation lors du changement d'état. Nous utiliserons un élément SVG pour créer le symbole de coché, la disposition en colonnes ou en lignes (flexbox) pour disposer les cases à cocher, et les animations CSS pour créer un effet de zoom. À la fin de ce laboratoire, vous aurez les compétences nécessaires pour créer des cases à cocher stylisées et interactives pour vos projets web.

Case à cocher personnalisée

index.html et style.css ont déjà été fournis dans la machine virtuelle (VM).

Pour créer une case à cocher stylisée avec une animation lors du changement d'état :

1. Créez un symbole de coché sous forme d'élément <svg> avec un élément <symbol> à l'intérieur. Utilisez l'élément <use> pour l'insérer comme icône SVG réutilisable.
2. Créez un div conteneur avec une classe .checkbox-container. Utilisez la disposition en colonnes ou en lignes (flexbox) pour créer la disposition appropriée des cases à cocher.
3. Cachez l'élément <input> et associez-lui une étiquette pour afficher une case à cocher et le texte fourni.
4. Pour animer le symbole de coché lors du changement d'état, utilisez stroke-dashoffset.
5. Pour créer un effet d'animation de zoom, utilisez transform: scale(0.9) via une animation CSS.

HTML :

<svg class="checkbox-symbol">
  <symbol id="check" viewbox="0 0 12 10">
    <polyline
      points="1.5 6 4.5 9 10.5 1"
      stroke-linecap="round"
      stroke-linejoin="round"
      stroke-width="2"
    ></polyline>
  </symbol>
</svg>

<div class="checkbox-container">
  <input class="checkbox-input" id="apples" type="checkbox" />
  <label class="checkbox" for="apples">
    <span>
      <svg width="12px" height="10px">
        <use xlink:href="#check"></use>
      </svg>
    </span>
    <span>Pommes</span>
  </label>
  <input class="checkbox-input" id="oranges" type="checkbox" />
  <label class="checkbox" for="oranges">
    <span>
      <svg width="12px" height="10px">
        <use xlink:href="#check"></use>
      </svg>
    </span>
    <span>Oranges</span>
  </label>
</div>

CSS :

.checkbox-symbol {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
  user-select: none;
}

.checkbox-container {
  box-sizing: border-box;
  background: #ffffff;
  color: #222;
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: row wrap;
}

.checkbox-container * {
  box-sizing: border-box;
}

.checkbox-input {
  position: absolute;
  visibility: hidden;
}

.checkbox {
  user-select: none;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  overflow: hidden;
  transition: all 0.3s ease;
  display: flex;
}

.checkbox:not(:last-child) {
  margin-right: 6px;
}

.checkbox:hover {
  background: rgba(0, 119, 255, 0.06);
}

.checkbox span {
  vertical-align: middle;
  transform: translate3d(0, 0, 0);
}

.checkbox span:first-child {
  position: relative;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  transform: scale(1);
  border: 1px solid #cccfdb;
  transition: all 0.3s ease;
}

.checkbox span:first-child svg {
  position: absolute;
  top: 3px;
  left: 2px;
  fill: none;
  stroke: #fff;
  stroke-dasharray: 16px;
  stroke-dashoffset: 16px;
  transition: all 0.3s ease;
  transform: translate3d(0, 0, 0);
}

.checkbox span:last-child {
  padding-left: 8px;
  line-height: 18px;
}

.checkbox:hover span:first-child {
  border-color: #0077ff;
}

.checkbox-input:checked + .checkbox span:first-child {
  background: #0077ff;
  border-color: #0077ff;
  animation: zoom-in-out 0.3s ease;
}

.checkbox-input:checked + .checkbox span:first-child svg {
  stroke-dashoffset: 0;
}

@keyframes zoom-in-out {
  50% {
    transform: scale(0.9);
  }
}

Veuillez cliquer sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.

Sommaire

Félicitations ! Vous avez terminé le laboratoire sur les cases à cocher personnalisées. Vous pouvez pratiquer d'autres laboratoires dans LabEx pour améliorer vos compétences.