一、需求

在许多网站的合作伙伴一栏，常常会看到一排排无限地循环滚动的logo墙。不久前，接到一个类似的需求。需求如下： 1、无限循环滚动； 2、鼠标hover后，暂停滚动，鼠标离开后，继续滚动； 3、支持从左往右和从右往左滚动； 4、滚动速度需要可配置。

简单动画，我们先尝试只使用css实现。

二、实现

1、marquee标签

说到无限循环滚动，很久以前marquee标签可以实现类似的功能，它可以无限循环滚动，并且可以控制方向和速度。但是该标签在HTML5中已经被弃用，虽然还可以正常使用，但w3c不再推荐使用该特性。作为一个标签，只需要负责布局，而不应该有行为特性。

了解marquee标签：marquee标签

2、css3动画

说到无限循环滚动我们会想到使用css3动画。

把animation-iteration-count设置为infinite，代表无限循环播放动画。

为了使动画运动平滑，我们把animation-timing-function设置为linear，代表动画匀速运动。

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4  <meta charset="UTF-8">
 5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6  <title>Document</title>
 7  <style>
 8    * {
 9      margin: 0;
10      padding: 0;
11      box-sizing: border-box;
12    }
13
14    body {
15      padding-top: 200px;
16    }
17
18    @keyframes scrolling {
19      to {
20        transform: translateX(100vw);
21      }
22    }
23    
24    .wall-item {
25      height: 90px;
26      width: 160px;
27      background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
28      animation: scrolling 4s linear infinite;
29    }
30  </style>
31</head>
32<body>
33  <div class="wall-item"></div>
34</body>
35</html>

我们上面实现了一个元素的滚动，在多个元素的时候，我们只需为每个元素设置不同的动画延迟时间（animation-delay），让每一项错落开来，就可以实现我们想要的效果了。至于鼠标hover后暂停动画，我们只需在滚动元素hover时把animation-play-state设置为暂停即可。

有了以上思路，我很快就可以写出一个纯css实现logo墙无限循环滚动的效果。

完整示例代码：

 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>Document</title>
 8  <style>
 9    * {
10      margin: 0;
11      padding: 0;
12      box-sizing: border-box;
13    }
14
15    :root {
16      --wall-item-height: 90px;
17      --wall-item-width: 160px;
18      --wall-item-number: 9;
19      --duration: 16s;
20    }
21
22    body {
23      padding-top: 300px;
24    }
25
26    @keyframes scrolling {
27      to {
28        transform: translateX(calc(var(--wall-item-width) * -1));
29      }
30    }
31
32    .wall {
33      margin: 30px auto;
34      height: var(--wall-item-height);
35      width: 80vw;
36      position: relative;
37      mask-image: linear-gradient(90deg, hsl(0 0% 0% / 0),
38          hsl(0 0% 0% / 1) 20%,
39          hsl(0 0% 0% / 1) 80%,
40          hsl(0 0% 0% / 0));
41    }
42
43    .wall .wall-item {
44      position: absolute;
45      top: 0;
46      left: 0;
47      transform: translateX(calc(var(--wall-item-width) * var(--wall-item-number)));
48      height: var(--wall-item-height);
49      width: var(--wall-item-width);
50      background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
51      animation: scrolling var(--duration) linear infinite;
52      cursor: pointer;
53    }
54
55    .wall[data-direction="reverse"] .wall-item {
56      animation-direction: reverse;
57      background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
58    }
59
60    .wall .wall-item:nth-child(1) {
61      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 1) * -1);
62    }
63
64    .wall .wall-item:nth-child(2) {
65      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 2) * -1);
66    }
67
68    .wall .wall-item:nth-child(3) {
69      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 3) * -1);
70    }
71
72    .wall .wall-item:nth-child(4) {
73      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 4) * -1);
74    }
75
76    .wall .wall-item:nth-child(5) {
77      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 5) * -1);
78    }
79
80    .wall .wall-item:nth-child(6) {
81      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 6) * -1);
82    }
83
84    .wall .wall-item:nth-child(7) {
85      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 7) * -1);
86    }
87
88    .wall .wall-item:nth-child(8) {
89      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 8) * -1);
90    }
91
92    .wall .wall-item:nth-child(9) {
93      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 9) * -1);
94    }
95
96    .wall:has(.wall-item:hover) .wall-item {
97      animation-play-state: paused;
98    }
99  </style>
100</head>
101
102<body>
103  <div class="wall" style="--duration:10s">
104    <div class="wall-item"></div>
105    <div class="wall-item"></div>
106    <div class="wall-item"></div>
107    <div class="wall-item"></div>
108    <div class="wall-item"></div>
109    <div class="wall-item"></div>
110    <div class="wall-item"></div>
111    <div class="wall-item"></div>
112    <div class="wall-item"></div>
113  </div>
114  <div class="wall" data-direction="reverse" style="--wall-item-number:9">
115    <div class="wall-item"></div>
116    <div class="wall-item"></div>
117    <div class="wall-item"></div>
118    <div class="wall-item"></div>
119    <div class="wall-item"></div>
120    <div class="wall-item"></div>
121    <div class="wall-item"></div>
122    <div class="wall-item"></div>
123    <div class="wall-item"></div>
124  </div>
125</body>
126
127</html>

可配置项：

—wall-item-height: 滚动项高度 —wall-item-width: 滚动项宽度 —wall-item-number: 滚动元素个数 —duration: 动画时长

我们也可以向上面示例代码一样，在.wall标签上，通过style属性，给每个滚动墙单独配置宽高、数量、动画时间。
滚动方向：

动画默认从左往右运动。我们可以在.wall标签上设置data-direction=“reverse”，让动画从右往左运动。

三、局限性

滚动元素（wall-item）太少，不足以填满包装元素（wall）时,会达不到预期效果；

（解决办法：用js把所有子元素复制一份push到最后面）
—wall-item-number默认为9，每次子元素数量变化，需手动修改—wall-item-number值。

 1（解决办法：使用js计算赋值。说到要用js，那么这一点局限性或许就可以忍受了。）

3. 需要手动为每一个滚动元素设置动画延迟时间（animation-delay）。

 1（解决办法：可用js计算赋值。）