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

デモ

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

コンセプト

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

HTML と Tailwind CSS のセットアップ

以下は、この効果を作成するために必要な HTML 構造と Tailwind CSS クラスです:

コードを分解する

コンテナのセットアップ

  





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

  
  
  入力フィールドのラッパー




  





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

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




  





メイン入力フィールドは、固定幅 500 ピクセル、高さ 14 Tailwind ユニットに設定されています。
border-white/50 クラスは半透明の境界線を追加し、rounded-md クラスは角を丸くします。

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




after 疑似要素は、境界線の周囲でアニメーションする円錐形のグラデーションを作成するために使用されます。

after:-inset-[1px] は入力の境界線を越えてグラデーションをわずかに拡大し、after:absolute は入力領域全体をカバーするようにグラデーションを絶対的に配置します。

after:animate-[spin_4s_infinite] は、4 秒ごとに 1 回転を完了するカスタム スピン アニメーションを追加します。
after:bg-[conic-gradient...] はグラデーション効果を作成します。 from-transparent クラスと to-blue-600 クラスを使用してカラーストップを定義し、流れ星を模倣したフェード効果を与えます。

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




  



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

  
  
  結論


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

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

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