Erstellen einer Shooting Star-Randanimation mit Tailwind CSS

In diesem Blogbeitrag erstellen wir mit Tailwind CSS eine fesselnde „Sternschnuppen“-Randanimation. Dieser Effekt verleiht einem Eingabefeld einen leuchtenden, animierten Rahmen, 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 verwenden die folgende Pseudoklasse von Tailwind, 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:

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

Den Code aufschlüsseln

Container-Setup

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

• Wir beginnen mit der Erstellung eines flexiblen 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

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

• 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

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

• 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 leicht ü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.
• Das 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

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

• 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

Das obige ist der detaillierte Inhalt vonErstellen einer Shooting Star-Randanimation mit Tailwind CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!