Spline
Fale com vendasComece a criar

Crie um switch interativo com desfoque progressivo e gradientes

Aula 8 de 15HanaIniciante4 min

Neste tutorial, mostramos como criar um switch interativo feito 100% no Hana usando desfoque progressivo + gradientes e um evento de hover do mouse para a interação. É um design interessante que pode ser usado em vários projetos, e mostramos cada passo.

Faça remix desta demo aqui: https://app.spline.design/ui/f7cc3864-707e-492a-8148-0e1ea37be1d3

O que você vai aprender

  1. 0:00Introdução
  2. 0:15Criando a forma base
  3. 0:39Adicionando um gradiente
  4. 1:04Adicionando um efeito de desfoque de camada
  5. 1:46Criando gatilhos
  6. 1:57Adicionando o evento de hover do mouse + transições
  7. 2:24Criando o traço branco + adicionando estados
  8. 3:07Configurando transições para o traço
  9. 3:35Final

Recursos relacionados