CSS 无限滚动动画

十二月 20, 2023 / Mr.x / 1阅读 / 0评论/ 分类: 实用创意
无限滚动动画 — 荣小站
前端 CSS 无限滚动 CSS3

CSS 无限滚动动画

纯 CSS 实现的无限滚动效果，无需 JavaScript 即可实现流畅的横向滚动轮播。

▼ 效果展示

头像1

头像1

头像2

头像2

头像3

头像3

头像4

头像4

头像5

头像5

头像6

头像6

纯 CSS 实现的无限滚动效果，无需 JavaScript 即可实现流畅的横向滚动轮播。

这是一个巧妙的 CSS 无限滚动实现方案。利用 CSS Grid 布局和动画延迟，配合关键的跳变技巧，实现了无缝的无限循环效果。代码简洁高效，不需要任何 JavaScript。

核心特性

  • 纯 CSS：无需任何 JavaScript
  • 无缝滚动：利用关键帧跳变实现无缝连接
  • 可自定义：通过 CSS 变量调整速度
  • 遮罩效果：两端渐变遮罩增强视觉体验

完整代码

以下是完整的单文件代码，你可以直接保存为 .html 文件运行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>无限滚动动画</title>
  <style>
    /* 容器样式 */
    .marquee-container {
      /* 动画持续时间 */
      --d: 15s;
      display: grid;
      /* 可见元素数量 x 单个宽度 */
      grid-template-columns: repeat(3, 300px);
      overflow: hidden;
      /* 两侧遮罩效果 */
      -webkit-mask: linear-gradient(90deg, 
        rgba(0,0,0,0) 0%, 
        #000 10%, 
        #000 90%, 
        rgba(0,0,0,0) 100%);
    }

    /* 每个滚动项 */
    .marquee-container > div {
      /* 全部放在第一行第一列 */
      grid-area: 1/1;
      display: grid;
      grid-template-columns: 80px 1fr;
      align-content: center;
      gap: 12px;
      background: #fff;
      border-radius: 12px;
      padding: 15px;
      /* 关键：无限滚动动画 */
      animation: r var(--d) linear infinite;
    }

    /* 图片样式 */
    .marquee-container > div img {
      width: 80px;
      height: 80px;
      object-fit: cover;
      border-radius: 50%;
      grid-row: span 2;
    }

    /* 通过延迟实现错开滚动 */
    .marquee-container > div:nth-child(2) {
      animation-delay: calc(-0.1666666667 * var(--d));
    }
    .marquee-container > div:nth-child(3) {
      animation-delay: calc(-0.3333333333 * var(--d));
    }
    .marquee-container > div:nth-child(4) {
      animation-delay: calc(-0.5 * var(--d));
    }
    .marquee-container > div:nth-child(5) {
      animation-delay: calc(-0.6666666667 * var(--d));
    }
    .marquee-container > div:nth-child(6) {
      animation-delay: calc(-0.8333333333 * var(--d));
    }

    /* 关键动画：移动后跳变 */
    @keyframes r {
      16.6666666667% {
        transform: translate(-100%);
      }
      16.6766666667% {
        /* 跳到右边远端，实现无缝循环 */
        transform: translate(500%);
      }
    }

    body {
      margin: 0;
      min-height: 100vh;
      display: grid;
      place-content: center;
      font-family: system-ui;
      background: #fffefe;
    }
  </style>
</head>
<body>
  <div class="marquee-container">
    <div>
      <img src="图片1.jpg" alt="" />
      <h3>头像1</h3>
      <p>描述1</p>
    </div>
    <div>
      <img src="图片2.jpg" alt="" />
      <h3>头像2</h3>
      <p>描述2</p>
    </div>
    <!-- 更多项... -->
  </div>
</body>
</html>

技术要点

技术点说明
CSS Grid所有元素重叠在同一位置
animation-delay通过负延迟实现错开滚动
transform 跳变移动到尽头后跳到右边实现无缝
mask 遮罩两端渐变遮罩
CSS 变量可自定义动画时长

实现原理

  1. Grid 重叠：所有元素使用 grid-area: 1/1 叠放在一起
  2. 错开动画：每个元素有不同的 animation-delay
  3. 无缝跳变：当动画到 16.67% 时，元素移动到左边；下一帧立即跳到右边 500% 的位置
  4. 无限循环：由于所有元素都在动，看起来就像无限滚动

使用说明

  1. 将完整代码保存为 .html 文件
  2. 用浏览器打开即可看到效果
  3. 修改 --d: 15s 调整滚动速度
  4. 修改 grid-template-columns 调整显示数量

#CSS 无限滚动动画(1)

评论