Estilización de casillas de verificación animadas con CSS

Introducción

En este laboratorio, aprenderemos a usar CSS para crear casillas de verificación personalizadas con animación al cambiar de estado. Usaremos un elemento SVG para crear el símbolo de verificación, flexbox para diseñar el diseño de las casillas de verificación y animaciones CSS para crear un efecto de zoom. Al final de este laboratorio, tendrás las habilidades para crear casillas de verificación elegantes e interactivas para tus proyectos web.

Casilla de verificación personalizada

index.html y style.css ya se han proporcionado en la VM.

Para crear una casilla de verificación con estilo y animación al cambiar de estado:

1. Crea un símbolo de verificación como un elemento <svg> con un elemento <symbol> dentro. Utiliza el elemento <use> para insertarlo como un icono SVG reusable.
2. Crea un div contenedor con una clase de .checkbox-container. Utiliza flexbox para crear el diseño adecuado para las casillas de verificación.
3. Oculta el elemento <input> y asócialo con una etiqueta para mostrar una casilla de verificación y el texto proporcionado.
4. Para animar el símbolo de verificación al cambiar de estado, utiliza stroke-dashoffset.
5. Para crear un efecto de animación de zoom, utiliza transform: scale(0.9) a través de una animación 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>Manzanas</span>
  </label>
  <input class="checkbox-input" id="naranjas" type="checkbox" />
  <label class="checkbox" for="naranjas">
    <span>
      <svg width="12px" height="10px">
        <use xlink:href="#check"></use>
      </svg>
    </span>
    <span>Naranjas</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);
  }
}

Haga clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puede actualizar la pestaña Web 8080 para previsualizar la página web.

Resumen

¡Felicitaciones! Has completado el laboratorio de Casilla de verificación personalizada. Puedes practicar más laboratorios en LabEx para mejorar tus habilidades.