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

Preview of the CTA animation that we're going to build

The Call To Action is the most important element of an interface, as it enables users to turn their intentions into actions, and products to finalize a specific goal (e.g., converting a prospect to a free trial).

Call To Action是界面中最重要的元素，它使用户能够将意图转化为行动，并使产品实现特定目标（例如，将潜在客户转化为免费试用）。

In all our Tailwind templates you’ll find at least one Call To Action. We designed them in unlimited shapes and styles, with the ultimate goal of creating a connection between products and end users.

在我们的所有Tailwind模板中，您都会找到至少一个Call To Action。我们以无限的形状和样式设计它们，最终目标是在产品和最终用户之间建立联系。

Generally, we like to design simple and straightforward CTAs, but for this tutorial (which was inspired by Glide), we decided to create a Call To Action animation using Tailwind CSS.

通常情况下，我们喜欢设计简单直接的CTA，但是为了这个教程（灵感来自Glide），我们决定使用Tailwind CSS创建一个Call To Action动画。

We are going to build a fake button that triggers multiple animations when you hover over it:

我们将创建一个虚拟按钮，当你悬停在上面时触发多个动画：

Creating the base structure

创建基本结构

Alright, let’s start by creating the basic structure for our CTA. We’ll use the <section> tag as a container and the <a> tag to make everything clickable.

好了，让我们从为我们的CTA创建基本结构开始。我们将使用

标签作为容器，标签使所有内容可点击。

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

The setup is pretty simple. The only thing to highlight is that we’ve used pseudo-attributes before and after for the moving text. This lets us duplicate the text without...