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

发布日期： 2024-09-04 阅读量： 作者： 网络

使用 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>

# css # 绝对定位 # overflow

上一篇: centos7添加新网卡后无法识别

下一篇: PHP 函数如何与 Go 交互

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

随便看看