Nesta postagem do blog, criaremos uma cativante animação de borda de "estrela cadente" usando Tailwind CSS. Esse efeito fornece uma borda brilhante e animada a um campo de entrada que pode chamar a atenção do usuário – perfeito para seções de call to action, como inscrições por e-mail ou notificações importantes.

Demonstração

Antes de mergulhar no código, você pode conferir a demonstração ao vivo do efeito aqui: Visualizar no Tailwind Playground.

O Conceito

A animação é obtida usando classes utilitárias e pseudoelementos do Tailwind CSS. Usaremos a pseudoclasse after do Tailwind para criar uma animação gradiente cônica que gira em torno do campo de entrada, dando a ilusão de uma estrela cadente traçando a borda.

Configuração de HTML e CSS Tailwind

Abaixo está a estrutura HTML e as classes CSS do Tailwind necessárias para criar este efeito:

Quebrando o Código

Configuração do contêiner

  






Começamos criando um contêiner flexível que centraliza o conteúdo vertical e horizontalmente com h-screen (altura total) e bg-black (fundo preto).



  
  
  Wrapper para campo de entrada




  






O campo de entrada é agrupado dentro de um div que possui z-10 para garantir que esteja acima da borda animada, m-auto para centralizá-lo dentro do flex container e overflow-hidden para conter a borda animada dentro de seus limites.



  
  
  Campo de entrada com borda animada




  






O campo de entrada principal é definido com uma largura fixa de 500px e altura de 14 unidades Tailwind.
A classe border-white/50 adiciona uma borda semitransparente, enquanto round-md fornece cantos arredondados.

bg-black define a cor de fundo para preto, mesclando-a com o contêiner.



  
  
  Criando a Animação




  after:absolute after:-inset-[1px] after:-z-10 after:h-full after:w-full after:animate-[spin_4s_infinite] after:bg-[conic-gradient(var(--tw-gradient-stops))] after:from-transparent after:from-40% after:via-50% after:to-blue-600 after:to-100%">





O pseudoelemento after é usado para criar o gradiente cônico que será animado ao redor da borda.

after:-inset-[1px] expande ligeiramente o gradiente além da borda da entrada e after:absolute o posiciona absolutamente para cobrir toda a área de entrada.

after:animate-[spin_4s_infinite] adiciona uma animação de giro personalizada que completa uma rotação completa a cada 4 segundos.
O after:bg-[conic-gradient...] cria o efeito gradiente. Usamos as classes from-transparent e to-blue-600 para definir as paradas de cor, dando um efeito de desbotamento que imita uma estrela cadente.



  
  
  Estilo do campo de entrada




  





A entrada em si é transparente (bg-transparent) e ocupa toda a altura e largura de seu pai.
A classe text-lg dimensiona o texto, enquanto text-white e placeholder:text-white/40 garantem que o texto e o espaço reservado fiquem visíveis contra o fundo escuro.
Finalmente, focus:outline-none remove o contorno de foco padrão para manter o estilo personalizado.



  
  
  Conclusão


Com apenas algumas linhas de Tailwind CSS e o poder dos pseudoelementos, você pode criar efeitos atraentes como esta animação de borda de estrela cadente. Este efeito não é apenas esteticamente agradável, mas também fácil de implementar e personalizar para seus próprios projetos. Sinta-se à vontade para ajustar as cores, o tempo e outras propriedades para atender às suas necessidades de design!

Boa codificação!

Foto da capa de Juskteez Vu no Unsplash