当前位置：首页 > 文章列表 > 文章 > 前端 > 使用 Tailwind CSS 创建流星边框动画

使用 Tailwind CSS 创建流星边框动画

来源：dev.to 2024-09-04 18:21:44 0浏览收藏

在IT行业这个发展更新速度很快的行业，只有不停止的学习，才不会被行业所淘汰。如果你是文章学习者，那么本文《使用 Tailwind CSS 创建流星边框动画》就很适合你！本篇内容主要包括##content_title##，希望对大家的知识积累有所帮助，助力实战开发！

在这篇博文中，我们将使用 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%">
      &lt;input type=&quot;text&quot; placeholder=&quot;join the waitlist, enter your email..&quot; class=&quot;h-full w-full bg-transparent px-4 text-lg text-white placeholder:text-white/40 focus:outline-none&quot; /&gt;
    </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 类来定义色标，从而产生模仿流星的褪色效果。

输入字段样式

  &lt;input type=&quot;text&quot; placeholder=&quot;Join the waitlist, enter your email..&quot; class=&quot;h-full w-full bg-transparent px-4 text-lg text-white placeholder:text-white/40 focus:outline-none&quot; /&gt;