In diesem Blogbeitrag erstellen wir mit Tailwind CSS eine fesselnde „Sternschnuppen“-Randanimation. Dieser Effekt verleiht einem Eingabefeld einen leuchtenden, animierten Rand, der die Aufmerksamkeit des Benutzers erregen kann – perfekt für Call-to-Action-Abschnitte wie E-Mail-Anmeldungen oder wichtige Benachrichtigungen.

Demo

Bevor Sie in den Code eintauchen, können Sie sich hier die Live-Demo des Effekts ansehen: Im Tailwind Playground ansehen.

Das Konzept

Die Animation wird mithilfe der Dienstprogrammklassen und Pseudoelemente von Tailwind CSS erreicht. Wir werden die After-Pseudoklasse von Tailwind verwenden, um eine konische Verlaufsanimation zu erstellen, die sich um das Eingabefeld dreht und die Illusion einer Sternschnuppe erzeugt, die den Rand nachzeichnet.

HTML- und Tailwind-CSS-Setup

Unten finden Sie die HTML-Struktur und die Tailwind-CSS-Klassen, die zum Erzeugen dieses Effekts erforderlich sind:

Den Code aufschlüsseln

Container-Setup

  





Wir beginnen mit der Erstellung eines Flex-Containers, der den Inhalt sowohl vertikal als auch horizontal mit h-screen (volle Höhe) und bg-black (schwarzer Hintergrund) zentriert.

  
  
  Wrapper für Eingabefeld




  





Das Eingabefeld ist in ein Div eingeschlossen, das z-10 hat, um sicherzustellen, dass es sich über dem animierten Rand befindet, m-auto, um es innerhalb des Flex-Containers zu zentrieren, und überlaufversteckt, um den animierten Rahmen innerhalb seiner Grenzen zu halten.

  
  
  Eingabefeld mit animiertem Rand




  





Das Haupteingabefeld ist auf eine feste Breite von 500 Pixel und eine Höhe von 14 Rückenwindeinheiten eingestellt.
Die Klasse „border-white/50“ fügt einen halbtransparenten Rand hinzu, während „rounded-md“ abgerundete Ecken ergibt.

bg-black setzt die Hintergrundfarbe auf Schwarz und vermischt sie mit dem Container.

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




Das After-Pseudoelement wird verwendet, um den konischen Farbverlauf zu erstellen, der um den Rand herum animiert wird.

after:-inset-[1px] erweitert den Farbverlauf geringfügig über den Rand der Eingabe hinaus und positioniert ihn absolut, um den gesamten Eingabebereich abzudecken.

after:animate-[spin_4s_infinite] fügt eine benutzerdefinierte Spin-Animation hinzu, die alle 4 Sekunden eine vollständige Drehung durchführt.
After:bg-[conic-gradient...] erzeugt den Verlaufseffekt. Wir verwenden die Klassen from-transparent und to-blue-600, um die Farbstopps zu definieren und so einen Fading-Effekt zu erzielen, der eine Sternschnuppe nachahmt.

  
  
  Eingabefeldstil




  



Die Eingabe selbst ist transparent (bg-transparent) und nimmt die volle Höhe und Breite ihres übergeordneten Elements ein.
Die Klasse text-lg passt die Größe des Texts an, während text-white und placeholder:text-white/40 dafür sorgen, dass Text und Platzhalter vor dem dunklen Hintergrund sichtbar sind.
Schließlich entfernt focus:outline-none die standardmäßige Fokuskontur, um den benutzerdefinierten Stil beizubehalten.

  
  
  Abschluss


Mit nur wenigen Zeilen Tailwind CSS und der Kraft von Pseudoelementen können Sie auffällige Effekte wie diese Sternschnuppen-Randanimation erstellen. Dieser Effekt ist nicht nur ästhetisch ansprechend, sondern auch einfach umzusetzen und für Ihre eigenen Projekte anzupassen. Sie können die Farben, das Timing und andere Eigenschaften jederzeit an Ihre Designanforderungen anpassen!

Viel Spaß beim Codieren!

Titelbild von Juskteez Vu auf Unsplash