简体中文
  • css
  • 动画
  • 无限滚动
  • 轮播

仅使用 CSS 的无限滚动轮播动画

只用 CSS 创建一个在悬停时暂停的无限滚动轮播动画。不需要 JavaScript。

Gao
Gao
Founder

介绍

我们当然爱 JavaScript。不过，看看仅用 CSS 能做到什么总是很有趣——尤其是涉及动画时，因为 CSS 动画通常比 JavaScript 动画“更轻量”。

在这篇文章中，我将向你展示如何仅用 CSS 创建一个无限滚动轮播动画，并带有悬停时暂停的效果。以下是我们将构建的预览：

A
B
C

创建一排卡片

首先，让我们创建轮播的基础结构。考虑一下这样的一排卡片：

A
B
C

看起来不错吧？这些卡片可以是你华丽的横幅、产品图片，或者你想在轮播中展示的任何内容。

复制卡片

因为我们希望轮播是无限的，所以它应该是首尾相连的。直觉上，我们可以尝试重复这些卡片：

查看结果：

A
B
C

只有第一组卡片是可见的。如果你查看 HTML，你会看到第二组卡片被隐藏并且跟在第一组之后。

动画轮播

是时候为轮播添加动画了！由于我们已有两组连接在一起的卡片，我们可以通过变换卡片组来为轮播添加动画。方法如下：

我们还需要补充最后一个细节：当鼠标悬停在轮播上时暂停动画。这将给用户更多的时间来清楚地查看内容。由于我们有两组卡片，因此在悬停在轮播上时我们需要暂停两个组的动画：

就是这样！🎊 现在轮播在你悬停时会暂停。

A
B
C

最后的想法

CSS 是很强大的，探索我们能用它做到什么总是令人愉快的。而且还有其他 CSS 属性，如 scroll-snap-type 和 scroll-snap-align，可以帮助你创建一个交互式轮播。编码愉快！🚀