Crea un interruptor interactivo con desenfoque progresivo y degradados

Lección 8 de 15HanaPrincipiante4 min

En este tutorial te enseñamos a crear un interruptor interactivo hecho al 100 % en Hana con desenfoque progresivo y degradados, y un evento de hover del ratón para la interacción. Es un diseño interesante que puedes usar en todo tipo de proyectos, y te guiamos paso a paso.

Remezcla esta demo aquí: https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3

Lo que aprenderás

  1. 0:00Introducción
  2. 0:15Crear la forma base
  3. 0:39Añadir un degradado
  4. 1:04Añadir un efecto de desenfoque de capa
  5. 1:46Crear los disparadores
  6. 1:57Añadir el evento Mouse Hover y las transiciones
  7. 2:24Crear el trazo blanco y añadir estados
  8. 3:07Configurar las transiciones del trazo
  9. 3:35Final

Recursos relacionados