如何使用 Tailwind CSS 制作令人惊叹的 CTA 动画

现场演示/下载
号召性用语是界面中最重要的元素，因为它使用户能够将他们的意图转化为行动，并使产品能够最终确定特定目标（例如，将潜在客户转变为免费试用）。

在我们所有的Tailwind 模板中，您至少会找到一个号召性用语。我们以无限的形状和风格设计它们，最终目标是在产品和最终用户之间建立联系。

一般来说，我们喜欢设计简单直接的 CTA，但对于本教程（受到Glide 的启发），我们决定使用 Tailwind CSS 创建一个号召性用语动画。

我们将构建一个假按钮，当您将鼠标悬停在其上时会触发多个动画：

将部分的配色方案从浅色更改为深色。
为按钮上的文本添加滚动效果。
使用“闪亮”效果突出显示按钮的边框。
创建基础结构
好吧，让我们从创建 CTA 的基本结构开始。我们将使用<section>标签作为容器，并使用<a>标签使所有内容都可点击。

<section class="relative z-0">
  <div class="w-full max-w-5xl mx-auto px-4 md:px-6 py-48">
    <div class="text-center">
      <a
        class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-6 items-center justify-center text-3xl sm:text-4xl md:text-5xl font-semibold text-slate-900"
        href="#0"
      >
        <!-- Fake Button -->
        <span>
          <!-- Default content: "Build the UI you need" -->
          <span>Build the UI you need</span>
          <!-- Hover content: "Create beautiful user interfaces" -->
          <span
            class="before:content-['Create_beautiful_user_interfaces'] after:content-['Create_beautiful_user_interfaces']"
            aria-hidden="true"
          ></span>
        </span>
        <!-- Text: "with Cruip" -->
        <span>with Cruip</span>
      </a>
    </div>
  </div>
</section>

设置非常简单。唯一要强调的是，我们对移动文本使用了伪属性before和。after这使我们可以复制文本而无需创建另一个元素。

更改悬停时的部分颜色模式
在定义其余样式之前，让我们看看当鼠标悬停在背景颜色上时如何更改背景颜色。我们将使用before伪属性来创建叠加层。

<section class="relative z-0">
  <div class="w-full max-w-5xl mx-auto px-4 md:px-6 py-48">
    <div class="text-center">
      <a
        class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-6 items-center justify-center text-3xl sm:text-4xl md:text-5xl font-semibold text-slate-900 before:absolute before:inset-0 hover:before:bg-slate-900 before:-z-10 before:transition-colors before:duration-500 group"
        href="#0"
      >
        <!-- Fake Button -->
        <span>
          <!-- Default content: "Build the UI you need" -->
          <span class="group-hover:opacity-0 transition-opacity duration-500 ease-in-out">Build the UI you need</span>
          <!-- Hover content: "Create beautiful user interfaces" -->
          <span
            class="before:content-['Create_beautiful_user_interfaces'] after:content-['Create_beautiful_user_interfaces']"
            aria-hidden="true"
          ></span>
        </span>
        <!-- Text: "with Cruip" -->
        <span>with Cruip</span>
      </a>
    </div>
  </div>
</section>

创建假按钮交互
为了在默认内容和悬停内容之间实现平滑过渡，我们将后者绝对定位为不透明度 0。并使用 Tailwind 的group-hover:修改器，我们将切换不透明度。

<section class="relative z-0">
  <div class="w-full max-w-5xl mx-auto px-4 md:px-6 py-48">
    <div class="text-center">
      <a
        class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-6 items-center justify-center text-3xl sm:text-4xl md:text-5xl font-semibold text-slate-900 before:absolute before:inset-0 hover:before:bg-slate-900 before:-z-10 before:transition-colors before:duration-500 group"
        href="#0"
      >
        <!-- Fake Button -->
        <span class="relative">
          <!-- Default content: "Build the UI you need" -->
          <span class="group-hover:opacity-0 transition-opacity duration-500 ease-in-out">Build the UI you need</span>
          <!-- Hover content: "Create beautiful user interfaces" -->
          <span
            class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 before:content-['Create_beautiful_user_interfaces'] after:content-['Create_beautiful_user_interfaces']"
            aria-hidden="true"
          ></span>
        </span>
        <!-- Text: "with Cruip" -->
        <span>with Cruip</span>
      </a>
    </div>
  </div>
</section>

设置按钮样式
现在，让我们设置按钮的样式。首先，我们将定义默认文本的样式。我们将使用一堆 Tailwind 实用程序类来设置填充、背景渐变、边框渐变等。

<!-- Fake Button -->
<span
  class="relative p-0.5 rounded-full bg-slate-200 group-hover:bg-slate-800 transition duration-500 overflow-hidden flex items-center justify-center"
>
  <span class="relative whitespace-nowrap">
    <!-- Default content: "Build the UI you need" -->
    <span
      class="block px-8 py-6 rounded-full bg-gradient-to-r from-slate-200 to-slate-100 z-10 group-hover:opacity-0 transition-opacity duration-500 ease-in-out"
      >Build the UI you need</span
    >
    <!-- Hover content: "Create beautiful user interfaces" -->
    <span
      class="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity duration-500 before:content-['Create_beautiful_user_interfaces'] after:content-['Create_beautiful_user_interfaces']"
      aria-hidden="true"
    ></span>
  </span>
</span>

一旦我们完成了这一点，我们就可以继续设计“悬停内容”的样式：

<!-- Fake Button -->
<span
  class="relative p-0.5 rounded-full bg-slate-200 group-hover:bg-slate-800 transition duration-500 overflow-hidden flex items-center justify-center"
>
  <span class="relative whitespace-nowrap">
    <!-- Default content: "Build the UI you need" -->
    <span
      class="block px-8 py-6 rounded-full bg-gradient-to-r from-slate-200 to-slate-100 z-10 group-hover:opacity-0 transition-opacity duration-500 ease-in-out"
      >Build the UI you need</span
    >
    <!-- Hover content: "Create beautiful user interfaces" -->
    <span
      class="absolute inset-0 rounded-full bg-gradient-to-r from-slate-900 to-slate-800 z-10 inline-flex items-center whitespace-nowrap overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-500 before:bg-clip-text before:text-transparent before:bg-gradient-to-r before:from-indigo-500 before:to-indigo-300 after:bg-clip-text after:text-transparent after:bg-gradient-to-r after:from-indigo-500 after:to-indigo-300 before:content-['Create_beautiful_user_interfaces'] after:content-['Create_beautiful_user_interfaces'] before:px-2 after:px-2"
      aria-hidden="true"
    ></span>
  </span>
</span>

最后，我们将添加更多类来定义文本最后部分的样式：

<span class="group-hover:text-slate-300 transition-colors duration-500 ease-in-out">with Cruip</span>

就是这样！当您将鼠标悬停在按钮上时，我们创建了从浅色模式到深色模式的平滑过渡，并且添加了很酷的交叉淡入淡出效果。

现在我们可以继续最有趣的部分：创建文本滚动动画和按钮边框发光效果。

创建文本滚动动画
要创建这种类型的效果，我们需要做的就是在 Tailwind 配置文件中定义自定义动画。我们将调用它infinite-scroll并将其设置为从右向左滚动。这是代码：

tailwind.config = {
  theme: {
    extend: {
      animation: {
        'infinite-scroll': 'infinite-scroll 6s linear infinite',
      },
      keyframes: {
        'infinite-scroll': {
          from: { transform: 'translateX(0)' },
          to: { transform: 'translateX(-100%)' },
        },
      },
    },
  },
};

一旦我们设置了动画，我们就可以通过使用类轻松地将其应用到我们的伪元素animate-infinite-scroll。像这样：

<!-- Hover content: "Create beautiful user interfaces" -->
<span
  class="absolute inset-0 rounded-full bg-gradient-to-r from-slate-900 to-slate-800 z-10 inline-flex items-center whitespace-nowrap overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-500 before:bg-clip-text before:text-transparent before:bg-gradient-to-r before:from-indigo-500 before:to-indigo-300 after:bg-clip-text after:text-transparent after:bg-gradient-to-r after:from-indigo-500 after:to-indigo-300 before:content-['Create_beautiful_user_interfaces'] after:content-['Create_beautiful_user_interfaces'] before:px-2 after:px-2 before:animate-infinite-scroll after:animate-infinite-scroll"
  aria-hidden="true"
></span>

创建闪耀效果
这是完成 CTA 的最后一步。为了制作发光效果，我们将使用线性渐变并将其应用于按钮元素的 before 伪属性。由于这个梯度有点复杂，我们将利用 Tailwind 的任意值功能来实现它。

为了真正使闪耀效果流行，我们还将为渐变添加无限旋转。我们不需要为此创建自定义动画。我们可以使用 Tailwind 的animate-spin，并使用自定义类来更改默认旋转时间，就像这样：animate-[spin_3s_linear_infinite]。

所以，这是更新后的代码：

<section class="relative z-0">
  <div class="w-full max-w-5xl mx-auto px-4 md:px-6 py-48">
    <div class="text-center">
      <a
        class="flex flex-col lg:flex-row space-y-4 lg:space-y-0 lg:space-x-6 items-center justify-center text-3xl sm:text-4xl md:text-5xl font-semibold text-slate-900 before:absolute before:inset-0 hover:before:bg-slate-900 before:-z-10 before:transition-colors before:duration-500 group"
        href="#0"
      >
        <!-- Fake Button -->
        <span
          class="relative p-0.5 rounded-full bg-slate-200 group-hover:bg-slate-800 transition duration-500 overflow-hidden flex items-center justify-center before:opacity-0 group-hover:before:opacity-100 before:absolute before:w-1/2 before:pb-[100%] before:bg-[linear-gradient(90deg,_theme(colors.indigo.500/0)_0%,_theme(colors.indigo.500)_35%,_theme(colors.indigo.200)_50%,_theme(colors.indigo.500)_65%,_theme(colors.indigo.500/0)_100%)] before:animate-[spin_3s_linear_infinite]"
        >
          <span class="relative whitespace-nowrap">
            <!-- Default content: "Build the UI you need" -->
            <span
              class="block px-8 py-6 rounded-full bg-gradient-to-r from-slate-200 to-slate-100 z-10 group-hover:opacity-0 transition-opacity duration-500 ease-in-out"
              >Build the UI you need</span
            >
            <!-- Hover content: "Create beautiful user interfaces" -->
            <span
              class="absolute inset-0 rounded-full bg-gradient-to-r from-slate-900 to-slate-800 z-10 inline-flex items-center whitespace-nowrap overflow-hidden opacity-0 group-hover:opacity-100 transition-opacity duration-500 before:bg-clip-text before:text-transparent before:bg-gradient-to-r before:from-indigo-500 before:to-indigo-300 after:bg-clip-text after:text-transparent after:bg-gradient-to-r after:from-indigo-500 after:to-indigo-300 before:content-['Create_beautiful_user_interfaces'] after:content-['Create_beautiful_user_interfaces'] before:px-2 after:px-2 before:animate-infinite-scroll after:animate-infinite-scroll"
              aria-hidden="true"
            ></span>
          </span>
        </span>
        <!-- Text: "with Cruip" -->
        <span class="group-hover:text-slate-300 transition-colors duration-500 ease-in-out">with Cruip</span>
      </a>
    </div>
  </div>
</section>

结论
凭借版本 3 中新的任意值功能，Tailwind CSS 已成为一个非常灵活的工具。它使我们能够制作复杂的效果，就像我们向您展示的那样，而无需编写一行 CSS。