使用 Tailwind CSS 創作流星邊框動畫-css教學-PHP中文網

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

PHPz

發布： 2024-09-05 06:46:43

原創

693 人瀏覽過

Creating a Shooting Star Border Animation with 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" />

登入後複製