Maison > Article > interface Web > 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.
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 :
<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>
<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" />
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!