如何在 CSS 中创建平滑的向上滚动列表，消除间隙

利用 CSS 动画巧妙打造平滑向上滚动列表

在现代网络世界中，动画已成为不可或缺的元素，它能够提升用户体验，吸引眼球。其中，CSS 动画尤为强大，可将网站的吸引力与可用性提升至全新境界。本文将深入探讨如何利用 CSS 动画创建一种独一无二的平滑向上滚动列表，打破困扰此类效果的常见间隙问题。

定义动画

要实现向上滚动列表的动画效果，我们首先需要定义一个 CSS 动画。借助 @keyframes 规则，我们可为动画的不同阶段指定持续时间和效果。在我们的案例中，目标是让列表平滑向上移动 100%。代码如下：

@keyframes move {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-100%);
  }
}

在这个动画中，move 是我们自定义的动画名称。它从列表初始位置 (0%) 开始，并在动画完成时平滑移动至顶部 (-100%)。transform: translateY() 属性控制元素在垂直方向上的移动。

应用动画

定义好动画后，我们需要将它应用到列表中，为此我们将使用 animation 属性。该属性指定应用于元素的动画，以及其持续时间、延迟和迭代次数。为了实现平滑、无限循环的动画效果，我们的代码如下：

ul {
  animation: move 20s infinite linear;
}

ul 选择器将动画应用于页面上所有无序列表。20s 指定动画持续时间，infinite 指定动画无限循环，linear 指定动画速度恒定。

消除间隙

通常情况下，列表向上滚动时会产生不美观的间隙。这是因为浏览器正在移除屏幕顶部已移动的列表项，而屏幕底部没有对应的数据填补空位。为了解决此问题，我们采用一个巧妙的技巧——复制列表，并将其放置在原列表之后。接着，我们调整副本的 animation-delay 属性，让其在原列表开始动画 20 秒后再开始。这样，当原列表移动到屏幕顶部时，副本正好从底部滑入，填补空位。修改后的代码如下：

<ul>
  <li>...</li>
  <li>...</li>
</ul>
<ul>
  <li>...</li>
  <li>...</li>
</ul>

ul:nth-child(2) {
  animation-delay: 20s;
}

结论

通过结合 @keyframes 和 animation 属性，我们创建了一个平滑向上滚动列表，彻底解决了间隙问题。此技术在各种场景中都十分实用，如制作动态菜单、滚动公告或展示大量数据。它为网页设计师提供了增强用户体验和信息展示的新途径。

常见问题解答

1. 如何调整动画速度？

• 编辑 animation 属性中的持续时间，以秒为单位。持续时间越短，动画速度越快。

2. 如何改变动画持续时间？

• 使用 animation-duration 属性，以秒为单位指定动画总持续时间。

3. 如何让动画无限循环？

• 在 animation 属性中使用 infinite 参数，让动画持续不断地播放。

4. 如何让动画在完成时停止？

• 在 animation-iteration-count 属性中指定 1，让动画只播放一次。

5. 如何调整动画延迟时间？

• 使用 animation-delay 属性，以秒为单位指定动画开始前的延迟时间。