Tailwind CSS で流れ星の境界線アニメーションを作成する

このブログ投稿では、Tailwind CSS を使用して魅力的な「流れ星」の境界線アニメーションを作成します。この効果は、ユーザーの注意を引くことができる、入力フィールドに輝くアニメーションの境界線を表示します。メールのサインアップや重要な通知などの CTA セクションに最適です。

デモ

コードを詳しく説明する前に、ここでエフェクトのライブ デモをチェックできます: Tailwind Playground で表示します。

コンセプト

アニメーションは、Tailwind CSS のユーティリティ クラスと疑似要素を使用して実現されます。 Tailwind の after 疑似クラスを使用して、入力フィールドの周りを回転する円錐形のグラデーション アニメーションを作成し、流れ星が境界線をなぞっているような錯覚を与えます。

HTML と Tailwind CSS のセットアップ

以下は、このエフェクトを作成するために必要な HTML 構造と Tailwind CSS クラスです。

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




<ul>
<li>まず、h-screen (フルハイト) と bg-black (黒の背景) を使用してコンテンツを垂直方向と水平方向の中央に配置するフレックス コンテナーを作成します。</li>
</ul>

<h4>
  
  
  入力フィールドのラッパー
</h4>



<pre class="brush:php;toolbar:false">  <div class="z-10 m-auto overflow-hidden p-0.5">




<ul>
<li>入力フィールドは、アニメートされた境界線の上に確実に配置されるように z-10 が設定された div 内でラップされ、フレックス コンテナー内で中央に配置されるように m-auto が設定され、アニメーション化された境界線を境界内に含めるために overflow-hidden が設定されています。</li>
</ul>

<h4>
  
  
  アニメーション枠付きの入力フィールド
</h4>



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




<ul>
<li>メインの入力フィールドは、幅 500 ピクセル、高さ 14 Tailwind ユニットの固定値に設定されます。</li>
<li>border-white/50 クラスは半透明の境界線を追加し、rounded-md クラスは角を丸くします。</li>
<li>
bg-black は背景色を黒に設定し、コンテナーとブレンドします。</li>
</ul>

<h4>
  
  
  アニメーションの作成
</h4>



<pre class="brush:php;toolbar:false">  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%">

• after 疑似要素は、境界線の周囲でアニメーション化する円錐形のグラデーションを作成するために使用されます。
• after:-inset-[1px] は入力の境界を越えてグラデーションをわずかに拡大し、after:absolute は入力領域全体をカバーするようにグラデーションを絶対的に配置します。
• after:animate-[spin_4s_infinite] は、4 秒ごとに 1 回転するカスタム スピン アニメーションを追加します。
• after:bg-[conic-gradient...] はグラデーション効果を作成します。 from-transparent クラスと to-blue-600 クラスを使用してカラーストップを定義し、流れ星を模倣したフェード効果を与えます。

入力フィールドのスタイル設定

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

• 入力自体は透明 (背景透明) で、親の高さと幅全体を占めます。
• text-lg クラスはテキストのサイズを設定し、text-white と placeholder:text-white/40 はテキストとプレースホルダーが暗い背景に対しても確実に見えるようにします。
• 最後に、focus:outline-none は、カスタム スタイルを維持するためにデフォルトのフォーカス アウトラインを削除します。

結論

Tailwind CSS のわずか数行と疑似要素の力で、この流れ星の境界線アニメーションのような目を引く効果を作成できます。この効果は見た目が美しいだけでなく、独自のプロジェクトに合わせて簡単に実装およびカスタマイズできます。デザインのニーズに合わせて、色、タイミング、その他のプロパティを自由に調整してください!

コーディングを楽しんでください!

Unsplash の Juskteez Vu によるカバー写真