HUA

本文将详细介绍如何使用 HTML 和 CSS 创建文本与图片的无限滚动动画效果。网页内容包含两个部分，一个是标签组滚动，另一个是图片组滚动，其中动画的效果主要表现为标签和图片一直横向的水平滚动，并且元素会无缝衔接从而实现无限循环，并且首尾两端有渐变蒙层效果，以造成出现和消失的过渡🎢。

HTML 结构

首先，HTML 代码部分包含了5个.scroll元素，这个数量取决于你网页有几个无限滚动区域。每个scroll元素都放了两个div(d1和d2)用于创建滚动容器，其中每个div元素都具有相同的内容元素，用于展示滚动内容。本案例的主要内容就是标签组span和图片组img。

 1<!DOCTYPE html>
 2<html lang="en">
 3
 4<head>
 5  <meta charset="UTF-8">
 6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7  <title>Infinite Scrolling Animation</title>
 8
 9  <link rel="stylesheet" href="./css/index.css">
10</head>
11
12<body>
13  <div class="scroll" style="--t: 20s">
14    <div>
15      <span>HTML</span>
16      <span>CSS</span>
17      <span>JavaScript</span>
18      <span>Vue</span>
19      <span>React</span>
20      <span>Figma</span>
21      <span>Photoshop</span>
22    </div>
23
24    <div>
25      <span>HTML</span>
26      <span>CSS</span>
27      <span>JavaScript</span>
28      <span>Vue</span>
29      <span>React</span>
30      <span>Figma</span>
31      <span>Photoshop</span>
32    </div>
33  </div>
34
35  <div class="scroll" style="--t: 30s">
36    
37  </div>
38
39  <div class="scroll" style="--t: 10s">
40    
41  </div>
42
43  <div class="scroll" style="--t: 35s">
44    
45  </div>
46
47  <div class="scroll img-box" style="--t: 25s">
48    <div>
49      <img src="./images/img_01.jpg" alt="image">
50      <img src="./images/img_02.jpg" alt="image">
51      <img src="./images/img_03.jpg" alt="image">
52      <img src="./images/img_04.jpg" alt="image">
53      <img src="./images/img_05.jpg" alt="image">
54      <img src="./images/img_06.jpg" alt="image">
55      <img src="./images/img_07.jpg" alt="image">
56      <img src="./images/img_08.jpg" alt="image">
57      <img src="./images/img_09.jpg" alt="image">
58    </div>
59
60    <div>
61      
62    </div>
63  </div>
64</body>
65
66</html>

标签组和图片组里的两个div要宽度保持一致，也就是说d1和d2里的每个标签span要对应相同，否则两个div就会出现滚动覆盖或距离过大。 还有就是每个scroll标签的自定义变量--t的值不一样(又快又慢)，要想滚动效果统一的话时间调整一样就可以了。

CSS 样式

接下来，看 CSS 部分设置了一些基本的全局样式，有重置样式、内容水平垂直居中布局、背景字体颜色等不做过多赘述。

 1@import './google-fonts.css';
 2
 3* {
 4  margin: 0;
 5  padding: 0;
 6  box-sizing: border-box;
 7  font-family: 'Poppins', sans-serif;
 8}
 9
10body {
11  min-height: 100vh;
12  background-color: #222;
13  color: #fff;
14
15  display: flex;
16  flex-direction: column;
17  justify-content: center;
18  align-items: center;  
19}
20
21

滚动容器scroll有一个固定宽度，然后对于溢出的内容隐藏不可见，以及使用 mask-image 创建了一个线性渐变遮罩，给内容带来滚动时的淡出淡入视觉效果。

  • span元素标签的样式设置了内联块级元素的展示方式，以及一些边距、边框、字母间距和文本转换。此外，当鼠标悬停时，还设置了背景颜色的变化。
  • img图片的样式设置了最大宽度和灰度滤镜，当鼠标悬停在图片上时，滤镜会被移除，呈现出原始彩色图片。 两者都提供了一种交互反馈的效果。
 1.scroll {
 2  display: flex;
 3  width: 700px;
 4  overflow: hidden;
 5  mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
 6  -webkit-mask-image: linear-gradient(90deg, transparent, #fff 20%, #fff 80%, transparent);
 7}
 8
 9.scroll > div span {
10  display: inline-block;
11  margin: 10px;
12  padding: 5px 10px;
13  background-color: #333;
14  border-radius: 5px;
15
16  letter-spacing: 0.2em;
17  text-transform: uppercase;
18
19  cursor: pointer;
20  transition: background-color 0.5s;
21}
22.scroll > div span:hover {
23  background-color: #4caf50;
24}
25
26.img-box img {
27  max-width: 150px;
28  filter: grayscale(1);
29  
30  cursor: pointer;
31  transition: filter 0.5s;
32}
33.img-box img:hover {
34  filter: grayscale(0);
35}
36
37

技术实现

接着就是每个滚动容器内包裹两个一样的div元素，用于创建无缝衔接，下面分别简称为d1和d2。通过 white-space: nowrap 属性确保 div 内的内容不换行，从而使得内容能够水平滚动。

主要通过两个不同的关键帧动画@keyframes关键帧和过渡animation属性控制两个滚动区域实现的滚动效果。让元素以无限循环和线性动画的方式在.scroll滚动容器内移动。拿本案列的img-box元素阐释一下动画执行过程：

  • 首先，它定义的CSS变量是--t: 25s。里面两个div元素都应用了25s匀速无限循环动画。
  • 然后，在d1中应用了延迟25s * -1 = -25s，animate动画从 transform: translateX(100%) 开始，将元素初始位置设置在容器的右侧外部。在动画结束时，元素移动到了容器的左侧外部，即 transform: translateX(-100%)。
  • 最后，在d2中应用了延迟25s / -2 = -12.5s，animate2动画从 transform: translateX(0) 开始，将元素初始位置设置在容器的右侧外部。在动画结束时，元素移动到了容器的左侧更远的位置，即 transform: translateX(-200%)。滚动的距离是比第一个d1滚动区域更远的，这样可以实现错开的滚动效果。
 1.scroll > div {
 2  white-space: nowrap;
 3  animation: animate var(--t) linear infinite;
 4  animation-delay: calc(var(--t) * -1);
 5}
 6@keyframes animate {
 7  0% {
 8    transform: translateX(100%);
 9  }
10
11  100% {
12    transform: translateX(-100%);
13  }
14}
15
16.scroll > div:nth-child(2) {
17  animation: animate2 var(--t) linear infinite;
18  animation-delay: calc(var(--t) / -2);
19}
20@keyframes animate2 {
21  0% {
22    transform: translateX(0);
23  }
24
25  100% {
26    transform: translateX(-200%);
27  }
28}
29
30.scroll:hover > div {
31  animation-play-state: paused;
32}
33
34
35@media screen and (max-width: 768px) {
36  .scroll {
37    width: 90vw;
38  }
39
40  .scroll > div span {
41    background-color: #4caf50;
42  }
43
44  .img-box img {
45    width: 33vw;
46    filter: grayscale(0);
47  }
48}
49

由于animate延迟小于animate2，所以动画a2先执行，从右向左持续滚动到x: -200%，当滚动到-100%时也就是当前可见区域，此时a1开始执行动画 1 ，从右向左持续滚动到x: -100%，当滚动到100%时也就是当前可见区域，a2已经到-200%了，接着看a1继续滚动到-100%，a2继续从0到-200%，如此循环往复。

使用 animation-play-state 属性设置当鼠标悬浮滚动容器时，div元素动画暂停。感谢评论区 小伙伴 提出。

最后

通过本篇文章的详细介绍，相信能够帮助你更好地使用CSS来创建一个文本与图片无限滚动动画，从而理解掌握和应用这个效果。通过 transform 属性的变化实现了水平滚动效果，使得 div 内的内容能够在容器内水平滚动，呈现出无限循环的连接效果。丰富了网页增添加了动态和交互性。

希望这篇文章对你在开发类似交互动画效果时有所帮助！如果你对这个案列还有任何问题，欢迎在评论区留言或联系(私信)我。码字不易🥲，不要忘了三连鼓励🤟，谢谢阅读，Happy Coding🎉！

源码我放在了GitHub，里面还有一些酷炫的效果、动画案列，喜欢的话不要忘了 starred 不迷路！

Footnotes

  1. 因为a2的延迟是-12.5s，由于是负值动画会立即开始，但它会从整个动画生命周期25s的12.5s动画点开始，接着从0到-100%过了12.5s，相当于过了一整个动画周期，a1是跳过(-25s)整个生命周期的，所以a2到-100%位置时a1就开始执行了。 ↩
个人笔记记录 2021 ~ 2025