Mencipta Animasi Sempadan Bintang Menembak dengan CSS Tailwind

Dalam catatan blog ini, kami akan mencipta animasi sempadan "bintang jatuh" yang menawan menggunakan CSS Tailwind. Kesan ini memberikan sempadan animasi yang bercahaya kepada medan input yang boleh menarik perhatian pengguna—sesuai untuk bahagian seruan tindak seperti pendaftaran e-mel atau pemberitahuan penting.

Demo

Sebelum menyelam ke dalam kod, anda boleh melihat demo langsung kesannya di sini: Lihat di Taman Permainan Tailwind.

Konsep

Animasi dicapai menggunakan kelas utiliti Tailwind CSS dan elemen pseudo. Kami akan menggunakan kelas pseudo Tailwind untuk mencipta animasi kecerunan kon yang berputar di sekeliling medan input, memberikan ilusi bintang jatuh yang menjejak sempadan.

Persediaan HTML dan Tailwind CSS

Di bawah ialah struktur HTML dan kelas CSS Tailwind yang diperlukan untuk mencipta kesan ini:

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

Memecahkan Kod

Persediaan Bekas

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

• Kami bermula dengan mencipta bekas fleksibel yang memusatkan kandungan secara menegak dan mendatar dengan skrin-h (ketinggian penuh) dan bg-hitam (latar belakang hitam).

Pembungkus untuk Medan Input

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

• Medan input dibalut di dalam div yang mempunyai z-10 untuk memastikan ia berada di atas sempadan animasi, m-auto untuk memusatkannya dalam bekas fleksibel dan disembunyikan limpahan untuk mengandungi sempadan animasi dalam sempadannya.

Medan Input dengan Sempadan Animasi

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

• Medan input utama ditetapkan kepada lebar tetap 500px dan ketinggian 14 unit Tailwind.
• Kelas sempadan-putih/50 menambah sempadan separa lutsinar, manakala bulat-md memberikannya bucu bulat.
• bg-black menetapkan warna latar belakang kepada hitam, menggabungkannya dengan bekas.

Mencipta Animasi

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

• Unsur pseudo selepas digunakan untuk mencipta kecerunan kon yang akan bernyawa di sekeliling sempadan.
• after:-inset-[1px] mengembangkan sedikit kecerunan melepasi sempadan input dan after:absolute meletakkannya secara mutlak untuk meliputi keseluruhan kawasan input.
• after:animate-[spin_4s_infinite] menambah animasi putaran tersuai yang melengkapkan satu putaran penuh setiap 4 saat.
• Selepas:bg-[conic-gradient...] mencipta kesan kecerunan. Kami menggunakan kelas daripada-telus dan kepada-biru-600 untuk menentukan hentian warna, memberikan kesan pudar yang meniru bintang jatuh.

Penggayaan Medan Input

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

• Input itu sendiri adalah lutsinar (bg-lutsinar) dan mengambil ketinggian dan lebar penuh induknya.
• Kelas text-lg mensaizkan teks, manakala text-white dan placeholder:text-white/40 memastikan teks dan ruang letak kelihatan pada latar belakang gelap.
• Akhir sekali, focus:outline-none mengalih keluar garis fokus lalai untuk mengekalkan penggayaan tersuai.

Kesimpulan

Dengan hanya beberapa baris Tailwind CSS dan kuasa elemen pseudo, anda boleh mencipta kesan yang menarik perhatian seperti animasi sempadan bintang jatuh ini. Kesan ini bukan sahaja menyenangkan dari segi estetik tetapi juga mudah untuk dilaksanakan dan disesuaikan untuk projek anda sendiri. Jangan ragu untuk mengubah suai warna, masa dan sifat lain agar sesuai dengan keperluan reka bentuk anda!

Selamat mengekod!

Foto Muka Depan oleh Juskteez Vu di Unsplash

Atas ialah kandungan terperinci Mencipta Animasi Sempadan Bintang Menembak dengan CSS Tailwind. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!