使用Tailwind CSS创建无限水平滚动动画

Preview of the logo carousel we're going to build

In this tutorial, we will show you how to create a cool infinite horizontal animation using only CSS. This effect can be used to display a variety of things, and for this post, we’ll focus on building a logo carousel that smoothly scrolls from right to left using Tailwind CSS classes.

在本教程中，我们将向您展示如何仅使用CSS创建一个酷炫的无限水平动画。这种效果可以用于显示各种内容，而在本文中，我们将重点介绍使用Tailwind CSS类构建一个平滑从右向左滚动的徽标走马灯。

The best part is that you can simply copy and paste the code into your HTML page, and there’s no need for any custom CSS.
As the last thing before we begin, if you’re interested in seeing infinite horizontal scroll in action in a real-case scenario, look at our dark Next.js landing page template, or our recruitment website template.

最好的部分是，您可以直接将代码复制粘贴到您的HTML页面中，无需任何自定义CSS。
在我们开始之前的最后一件事是，如果您有兴趣在实际情况下看到无限水平滚动的效果，请查看我们的黑暗Next.js落地页模板，或者我们的招聘网站模板。

Let’s begin!

让我们开始吧！

Create the HTML structure

创建HTML结构

First, let’s set up a straightforward structure for our logo carousel using an unordered list.

首先，让我们使用无序列表为我们的徽标轮播设置一个简单的结构。

<div class="w-full inline-flex flex-nowrap"> <ul class="flex items-center justify-center md:justify-start [&_li]:mx-8 [&_img]:max-w-none"> <li> <img src="./facebook.svg" alt="Facebook" /> </li> <li> <img src="./disney.svg" alt="Disney" /> </li> <li> <img src="./airbnb.svg" alt="Airbnb" /> </li> <li> <img src="./apple.svg" alt="Apple" /> </li> <li> <img src="./spark.svg" alt="Spark" /> </li> <li> <img src="./samsung.svg" alt="Samsung" /> </li> <li> <img src="./quora.svg" alt="Quora" /> </li> <li> <img src="./sass.svg" alt="Sass" /> </li> </ul> </div>

Each list item will represent a company’s logo, and we’ve added the alt attribute to every image to ensure accessibility.

每个列表项将代表一个公司的标志，并且我们已经为每个图像添加了alt属性以确保可访问性。

The ul element has the classes flex and items-center, which make the logos stand in a row and be vertically centered.

ul元素具有flex和items-center类，这使得标志以一行排列并垂直居中。

Additionally, we’ve used some arbitrary Tailwind CSS variants to optimize the layout:

此外，我们还使用了一些任意的Tailwind CSS变体来优化布局：

[&_li]:mx-8 adds a horizontal ...