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'appel à l'action telles que les inscriptions par e-mail ou les notifications importantes.
Avant de plonger dans le code, vous pouvez consulter la démo en direct de l'effet ici : Afficher dans Tailwind Playground.
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.
Vous trouverez ci-dessous la structure HTML et les classes CSS Tailwind nécessaires pour créer cet effet :
- 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
- 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 masqué par débordement pour contenir la bordure animée dans ses limites.
Champ de saisie avec bordure animée
- 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
- 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 l'arrière-plan 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
Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.
Copyright© 2022 湘ICP备2022001581号-3