Animiertes Checkbox Styling mit CSS

Einführung

In diesem Lab werden wir lernen, wie man mit CSS benutzerdefinierte Checkboxen mit Animation bei einem Statuswechsel erstellt. Wir werden ein SVG-Element verwenden, um das Häkchensymbol zu erstellen, Flexbox, um die Checkboxen auszurichten, und CSS-Animationen, um einen Zoom-Effekt zu erzeugen. Am Ende dieses Labs werden Sie die Fähigkeiten haben, stilvolle und interaktive Checkboxen für Ihre Webprojekte zu erstellen.

Benutzerdefinierte Checkbox

index.html und style.css wurden bereits in der VM bereitgestellt.

Um eine stilvolle Checkbox mit Animation bei einem Statuswechsel zu erstellen:

1. Erstellen Sie ein Häkchensymbol als <svg>-Element mit einem <symbol>-Element darin. Verwenden Sie das <use>-Element, um es als wiederverwendbares SVG-Symbol einzufügen.
2. Erstellen Sie einen Container-Div mit der Klasse .checkbox-container. Verwenden Sie Flexbox, um das passende Layout für die Checkboxen zu erstellen.
3. Verbergen Sie das <input>-Element und verbinden Sie es mit einem Label, um eine Checkbox und den bereitgestellten Text anzuzeigen.
4. Um das Häkchensymbol bei einem Statuswechsel zu animieren, verwenden Sie stroke-dashoffset.
5. Um einen Zoom-Animationseffekt zu erstellen, verwenden Sie transform: scale(0.9) über eine CSS-Animation.

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>Äpfel</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>Orangen</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);
  }
}

Bitte klicken Sie in der unteren rechten Ecke auf 'Go Live', um den Webdienst auf Port 8080 auszuführen. Anschließend können Sie die Registerkarte Web 8080 aktualisieren, um die Webseite anzuschauen.

Zusammenfassung

Herzlichen Glückwunsch! Sie haben das Lab "Benutzerdefinierte Checkbox" abgeschlossen. Sie können in LabEx weitere Labs ausprobieren, um Ihre Fähigkeiten zu verbessern.