在這篇文章中，我們將使用 Tailwind CSS 創建一個迷人的「流星」邊框動畫。此效果為輸入欄位提供發光的動畫邊框，可吸引使用者的注意力，非常適合電子郵件註冊或重要通知等號召性用語部分。

示範

在深入程式碼之前，您可以在此處查看效果的現場演示：在 Tailwind Playground 中查看。

概念

動畫是使用 Tailwind CSS 的實用程式類別和偽元素實現的。我們將使用 Tailwind 的 after 偽類來創建圍繞輸入字段旋轉的圓錐漸變動畫，給人一種流星追蹤邊界的錯覺。

HTML 和 Tailwind CSS 設定

以下是建立此效果所需的 HTML 結構和 Tailwind CSS 類別：

分解代碼

容器設定

  





我們首先創建一個 Flex 容器，以 h-screen（全高）和 bg-black（黑色背景）垂直和水平居中內容。 

  
  
  輸入欄位的包裝




  





輸入欄位被包裝在一個div 中，該div 具有z-10 以確保其位於動畫邊框上方，m-auto 將其在Flex 容器中居中，以及Overflow-hidden 以將動畫邊框包含在其邊界內。 

  
  
  帶有動畫邊框的輸入字段




  





主輸入欄位設定為固定寬度 500px，高度為 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 秒完成一次完整旋轉。 
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 拍攝