Création d'une animation de bordure d'étoile filante avec Tailwind CSS

Dans cet article de blog, nous allons créer une animation de bordure captivante en forme d'étoile filante à l'aide du CSS Tailwind. Cet effet donne une bordure lumineuse et animée à un champ de saisie qui peut attirer l'attention de l'utilisateur. Idéal pour les sections d'incitation à l'action telles que les inscriptions par e-mail ou les notifications importantes.

Démo

Avant de plonger dans le code, vous pouvez consulter la démo en direct de l'effet ici : Afficher dans Tailwind Playground.

Le concept

L'animation est réalisée à l'aide des classes utilitaires et des pseudo-éléments de Tailwind CSS. Nous utiliserons la pseudo-classe after de Tailwind pour créer une animation de dégradé conique qui tourne autour du champ de saisie, donnant l'illusion d'une étoile filante traçant la bordure.

Configuration HTML et Tailwind CSS

Vous trouverez ci-dessous la structure HTML et les classes CSS Tailwind nécessaires pour créer cet effet :

<div class="flex h-screen bg-black">
  <div class="z-10 m-auto overflow-hidden p-0.5">
    <div class="after:transparent relative h-14 w-[500px] rounded-md border border-white/50 bg-black 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%">
      <input type="text" placeholder="Join the waitlist, enter your email.." class="h-full w-full bg-transparent px-4 text-lg text-white placeholder:text-white/40 focus:outline-none" />
    </div>
  </div>
</div>

Décrypter le code

Configuration du conteneur

  <div class="flex h-screen bg-black">

• Nous commençons par créer un conteneur flexible qui centre le contenu verticalement et horizontalement avec h-screen (pleine hauteur) et bg-black (fond noir).

Wrapper pour le champ de saisie

  <div class="z-10 m-auto overflow-hidden p-0.5">

• Le champ de saisie est enveloppé dans un div qui a z-10 pour garantir qu'il se trouve au-dessus de la bordure animée, m-auto pour le centrer dans le conteneur flexible et overflow-hidden pour contenir la bordure animée dans ses limites.

Champ de saisie avec bordure animée

  <div class="after:transparent relative h-14 w-[500px] rounded-md border border-white/50 bg-black ...">

• Le champ de saisie principal est défini sur une largeur fixe de 500 px et une hauteur de 14 unités Tailwind.
• La classe border-white/50 ajoute une bordure semi-transparente, tandis que round-md lui donne des coins arrondis.
• bg-black définit la couleur d'arrière-plan sur noir, en la mélangeant avec le conteneur.

Création de l'animation

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

• Le pseudo-élément after est utilisé pour créer le dégradé conique qui s'animera autour de la bordure.
• after:-inset-[1px] étend légèrement le dégradé au-delà de la bordure de l'entrée, et after:absolute le positionne de manière absolue pour couvrir toute la zone d'entrée.
• after:animate-[spin_4s_infinite] ajoute une animation de rotation personnalisée qui effectue une rotation complète toutes les 4 secondes.
• Le after:bg-[conic-gradient...] crée l'effet de dégradé. Nous utilisons les classes from-transparent et to-blue-600 pour définir les arrêts de couleur, donnant un effet de fondu qui imite une étoile filante.

Style du champ de saisie

  <input type="text" placeholder="Join the waitlist, enter your email.." class="h-full w-full bg-transparent px-4 text-lg text-white placeholder:text-white/40 focus:outline-none" />

• L'entrée elle-même est transparente (bg-transparent) et occupe toute la hauteur et la largeur de son parent.
• La classe text-lg redimensionne le texte, tandis que text-white et placeholder:text-white/40 garantissent que le texte et l'espace réservé sont visibles sur le fond sombre.
• Enfin, focus:outline-none supprime le contour du focus par défaut pour conserver le style personnalisé.

Conclusion

Avec seulement quelques lignes de Tailwind CSS et la puissance des pseudo-éléments, vous pouvez créer des effets accrocheurs comme cette animation de bordure d'étoile filante. Cet effet est non seulement esthétique mais également facile à mettre en œuvre et à personnaliser pour vos propres projets. N'hésitez pas à modifier les couleurs, le timing et d'autres propriétés pour répondre à vos besoins de conception !

Bon codage !

Photo de couverture par Juskteez Vu sur Unsplash

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!