En esta publicación de blog, crearemos una cautivadora animación de borde de "estrella fugaz" usando Tailwind CSS. Este efecto proporciona un borde animado y brillante a un campo de entrada que puede captar la atención del usuario; perfecto para secciones de llamado a la acción, como registros de correo electrónico o notificaciones importantes.

Manifestación

Antes de profundizar en el código, puedes ver la demostración en vivo del efecto aquí: Ver en Tailwind Playground.

El concepto

La animación se logra utilizando las clases de utilidad y pseudoelementos de Tailwind CSS. Usaremos la pseudoclase posterior de Tailwind para crear una animación de gradiente cónico que gira alrededor del campo de entrada, dando la ilusión de una estrella fugaz trazando el borde.

Configuración de HTML y CSS Tailwind

A continuación se muestra la estructura HTML y las clases CSS de Tailwind necesarias para crear este efecto:

Rompiendo el código

Configuración del contenedor

  






Comenzamos creando un contenedor flexible que centra el contenido tanto vertical como horizontalmente con h-screen (altura completa) y bg-black (fondo negro).



  
  
  Envoltorio para campo de entrada




  






El campo de entrada está dentro de un div que tiene z-10 para garantizar que esté por encima del borde animado, m-auto para centrarlo dentro del contenedor flexible y desbordamiento oculto para contener el borde animado dentro de sus límites.



  
  
  Campo de entrada con borde animado




  






El campo de entrada principal está configurado con un ancho fijo de 500 px y una altura de 14 unidades Tailwind.
La clase border-white/50 agrega un borde semitransparente, mientras que rounded-md le da esquinas redondeadas.

bg-black establece el color de fondo en negro, combinándolo con el contenedor.



  
  
  Creando la animación




  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%">





El pseudoelemento posterior se utiliza para crear el degradado cónico que se animará alrededor del borde.

after:-inset-[1px] expande ligeramente el degradado más allá del borde de entrada, y after:absolute lo posiciona absolutamente para cubrir toda el área de entrada.

after:animate-[spin_4s_infinite] agrega una animación de giro personalizada que completa una rotación completa cada 4 segundos.
El after:bg-[conic-gradient...] crea el efecto de degradado. Usamos las clases from-transparent y to-blue-600 para definir las paradas de color, dando un efecto de desvanecimiento que imita una estrella fugaz.



  
  
  Estilo de campo de entrada




  





La entrada en sí es transparente (bg-transparente) y ocupa todo el alto y ancho de su padre.
La clase text-lg ajusta el tamaño del texto, mientras que text-white y placeholder:text-white/40 garantizan que el texto y el marcador de posición sean visibles sobre el fondo oscuro.
Por último, focus:outline-none elimina el contorno de enfoque predeterminado para mantener el estilo personalizado.



  
  
  Conclusión


Con solo unas pocas líneas de Tailwind CSS y el poder de los pseudoelementos, puedes crear efectos llamativos como esta animación de borde de estrella fugaz. Este efecto no sólo es estéticamente agradable sino también fácil de implementar y personalizar para sus propios proyectos. ¡Siéntete libre de modificar los colores, el tiempo y otras propiedades para adaptarlos a tus necesidades de diseño!

¡Feliz codificación!

Foto de portada de Juskteez Vu en Unsplash