使用Tailwind CSS创建滑动文本动画
In this tutorial, we’ll learn how to create a sliding text animation using only Tailwind CSS. The animation will display a word sliding from the bottom to the top, replacing the previous word. This effect is especially helpful when you want to alternate multiple words in a sentence (similar to a carousel) and keep the overall density of text compact. You’ve probably seen this effect used a lot for headlines, but the use is not limited to them, and you can try it out in any title or even in paragraphs.
在本教程中，我们将学习如何仅使用Tailwind CSS创建一个滑动文本动画。该动画将显示一个单词从底部滑动到顶部，替换前一个单词。当您想要在句子中交替多个单词（类似于旋转木马）并保持整体文本的紧凑度时，这种效果特别有帮助。您可能经常在标题中看到这种效果的使用，但使用不仅限于标题，您甚至可以在任何标题或段落中尝试它。
The best part of this tutorial? We will achieve all this using only Tailwind CSS—no need to write a single line of JavaScript!
Are you ready?
这个教程的最好部分？我们将只使用Tailwind CSS来实现所有这些，无需编写一行JavaScript代码！
你准备好了吗？
Let’s get started!
让我们开始吧！
Creating a new document with Tailwind CDN
使用Tailwind CDN创建新文档
For this experiment, we’ll utilize the Tailwind CSS CDN. While it might not be the best approach for real projects, it’s perfect for a tutorial like this. The CDN lets us use Tailwind directly in the browser, without any installation or configuration hassles. Additionally, we will be able to customize Tailwind’s configuration directly in a script tag.
对于这个实验，我们将使用Tailwind CSS CDN。虽然它可能不是真实项目的最佳方法，但对于像这样的教程来说，它非常适合。CDN允许我们直接在浏览器中使用Tailwind，无需任何安装或配置麻烦。此外，我们还可以在script标签中直接自定义Tailwind的配置。
Let’s start by creating a new HTML file and setting up the structure to host our carousel of words:
让我们首先创建一个新的HTML文件，并设置结构来承载我们的单词轮播：
<!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"> <title>Rotating Words Animation</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet"> <script src=...