使用 Tailwind CSS 創作流星邊框動畫

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

示範

在深入研究程式碼之前，您可以在此處查看效果的現場演示：在 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">

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

輸入欄位的包裝

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

• 輸入欄位被包裹在一個div 中，該div 具有z-10 以確保其位於動畫邊框之上，m-auto 以將其在Flex 容器中居中，並溢出隱藏以將動畫邊框包含在其邊界內。

帶有動畫邊框的輸入字段

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

• 主輸入欄位設定為固定寬度 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 類別來定義色標，從而產生模仿流星的褪色效果。

輸入欄位樣式

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

以上是使用 Tailwind CSS 創作流星邊框動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！