Cria um interruptor interativo com desfocagem progressiva e gradientes

HanaPrincipiante4 min

Neste tutorial, mostramos-te como criar um interruptor interativo feito 100% no Hana com desfocagem progressiva + gradientes, e um evento de passar o cursor para a interação. É um design interessante que pode ser usado em vários projetos, e acompanhamos-te em cada passo.

Faz remix desta demonstração aqui: https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3

O que vais aprender

  1. 0:00Introdução
  2. 0:15Criar a forma base
  3. 0:39Adicionar um gradiente
  4. 1:04Adicionar um efeito de desfocagem da camada
  5. 1:46Criar acionadores
  6. 1:57Adicionar o evento de passar o cursor + transições
  7. 2:24Criar o traço branco + adicionar estados
  8. 3:07Definir transições para o traço
  9. 3:35Final

Recursos relacionados

Tutoriais relacionados

Todos os tutoriais