HUA
首页/文章/css

纯css实现无限循环滚动logo墙

2024-08-30
1040 字约 4 分钟
...
学习

一、需求

在许多网站的合作伙伴一栏，常常会看到一排排无限地循环滚动的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，代表动画匀速运动。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      padding-top: 200px;
    }

    @keyframes scrolling {
      to {
        transform: translateX(100vw);
      }
    }
    
    .wall-item {
      height: 90px;
      width: 160px;
      background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
      animation: scrolling 4s linear infinite;
    }
  </style>
</head>
<body>
  <div class="wall-item"></div>
</body>
</html>

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

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

完整示例代码：
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --wall-item-height: 90px;
      --wall-item-width: 160px;
      --wall-item-number: 9;
      --duration: 16s;
    }

    body {
      padding-top: 300px;
    }

    @keyframes scrolling {
      to {
        transform: translateX(calc(var(--wall-item-width) * -1));
      }
    }

    .wall {
      margin: 30px auto;
      height: var(--wall-item-height);
      width: 80vw;
      position: relative;
      mask-image: linear-gradient(90deg, hsl(0 0% 0% / 0),
          hsl(0 0% 0% / 1) 20%,
          hsl(0 0% 0% / 1) 80%,
          hsl(0 0% 0% / 0));
    }

    .wall .wall-item {
      position: absolute;
      top: 0;
      left: 0;
      transform: translateX(calc(var(--wall-item-width) * var(--wall-item-number)));
      height: var(--wall-item-height);
      width: var(--wall-item-width);
      background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
      animation: scrolling var(--duration) linear infinite;
      cursor: pointer;
    }

    .wall[data-direction="reverse"] .wall-item {
      animation-direction: reverse;
      background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
    }

    .wall .wall-item:nth-child(1) {
      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 1) * -1);
    }

    .wall .wall-item:nth-child(2) {
      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 2) * -1);
    }

    .wall .wall-item:nth-child(3) {
      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 3) * -1);
    }

    .wall .wall-item:nth-child(4) {
      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 4) * -1);
    }

    .wall .wall-item:nth-child(5) {
      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 5) * -1);
    }

    .wall .wall-item:nth-child(6) {
      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 6) * -1);
    }

    .wall .wall-item:nth-child(7) {
      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 7) * -1);
    }

    .wall .wall-item:nth-child(8) {
      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 8) * -1);
    }

    .wall .wall-item:nth-child(9) {
      animation-delay: calc((var(--duration) / var(--wall-item-number)) * (var(--wall-item-number) - 9) * -1);
    }

    .wall:has(.wall-item:hover) .wall-item {
      animation-play-state: paused;
    }
  </style>
</head>

<body>
  <div class="wall" style="--duration:10s">
    <div class="wall-item"></div>
    <div class="wall-item"></div>
    <div class="wall-item"></div>
    <div class="wall-item"></div>
    <div class="wall-item"></div>
    <div class="wall-item"></div>
    <div class="wall-item"></div>
    <div class="wall-item"></div>
    <div class="wall-item"></div>
  </div>
  <div class="wall" data-direction="reverse" style="--wall-item-number:9">
    <div class="wall-item"></div>
    <div class="wall-item"></div>
    <div class="wall-item"></div>
    <div class="wall-item"></div>
    <div class="wall-item"></div>
    <div class="wall-item"></div>
    <div class="wall-item"></div>
    <div class="wall-item"></div>
    <div class="wall-item"></div>
  </div>
</body>

</html>

  • 可配置项：

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

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

  • 滚动方向：

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

三、局限性

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

    （解决办法：用js把所有子元素复制一份push到最后面）

  2. --wall-item-number默认为9，每次子元素数量变化，需手动修改--wall-item-number值。

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

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

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

如果您觉得这篇文章有帮助，请点个赞吧～

分享文章

相关文章

更多文章 →
css2026-06-17
外阴影和内阴影介绍
在前端页面设计中，阴影是非常常见的视觉效果。它可以让元素看起来更有层次感，也可以用来表达悬浮、按压、凹陷、卡片、按钮等状态。 CSS 中最常用的阴影属性是 。它既可以实现外阴影，也可以实现内阴影。 一、什么是外阴影 外阴影指的是元素外部的阴影效果。 它会出现在元素边框之外，让元素看起来像是从页面中“浮起来”了一样。常见的卡片、弹窗、按钮悬浮效果，基本都会用到外阴影。 例如： 这个阴影表示：元素下方有一层柔和的黑色阴影，让卡片看起来更有立...
学习
css2026-05-15
border-image-slice详细介绍
是 CSS 系列属性里最关键、也最容易让人懵的一个属性。 它的作用可以简单理解为： 把一张图片切成九宫格，然后决定哪几块用来绘制元素的边框。 它通常和这些属性一起使用： 或者简写成： 其中 决定“怎么切图”。 一、 是什么？ 普通的 只能画纯色边框： 但有时候我们想用图片作为边框，比如： 游戏按钮边框 像素风 UI 复古窗口 聊天气泡 卡牌边框 花纹装饰框 九宫格按钮背景 这时候就可以用 。 例如一张按钮图片长这样： 我们希望按钮变宽时...
学习
css2026-03-05
如何在最小副作用下创建 BFC
在 CSS 布局的江湖中， BFC (Block Formatting Context，块级格式化上下文) 是一个老生常谈却又至关重要的概念。无论是解决 高度塌陷 、 清除浮动 ，还是防止 垂直外边距重叠 ，BFC 都是我们的得力助手。 但是，创建 BFC 的方法有很多： 、 、 、 …… 哪种方法对现有布局的“破坏”最小？ ❌ 过去的老方法 在过去，为了触发 BFC，我们不得不使用一些带有副作用的“黑客”技巧： : 元素会脱离文档流，...
学习
css2026-03-03
CSS过渡性能解析：transition: all
CSS过渡性能深度解析：为什么 可能是你页面的隐形杀手 一、引言：一个被忽视的性能陷阱 你是否曾在项目中这样写： 看似简洁优雅，却可能在低端设备上引发卡顿、掉帧。 真相 ： 是前端性能优化中高频出现的“隐形陷阱”。本文将彻底揭开它的面纱。 二、核心概念： 到底在控制什么？ 指定 哪些CSS属性变化时触发动画过渡 。它是过渡效果的“守门员”： | 值 | 含义 | 生成的CSS | | | | | | | 所有 可过渡属性变化时均触发动画...
学习
css2026-01-26
在CSS中，四种高度视口单位的区别
在CSS中，视口单位是构建响应式网页设计的重要工具，特别是针对移动端开发。除了传统的 ，CSS新引入了 、 和 等更精确的单位，解决传统单位在移动端的局限性。 四种高度视口单位的区别 | 单位 | 全称 | 含义 | 特点 | | | | | | | vh | Viewport Height | 传统视口高度单位，1vh = 视口高度的1% | 在移动端有问题：不考虑浏览器UI变化，经常导致内容被遮挡或出现意外滚动 | | svh |...
学习
css2025-11-04
keyframes 关键帧机制
一、什么是 @keyframes？ 用于定义动画在不同时间点（关键帧）的样式变化；配合 属性应用到元素上。 定义动画 ：使用 声明关键帧序列； 应用动画 ：在选择器中通过 / 相关长属性控制表现。 二、基本语法 等价写法（ / ）： 三、与 属性配合使用 /相关长属性 | 属性名 | 含义 | 示例值 | | : | : | : | | | 动画名称 | | | | 持续时长 | 、 | | | 速度曲线 | / / / | | | 延...
学习

评论

请登录后发表评论

去登录
加载评论中...

目录