CSS3 动画实现无缝滚动效果

原创

小丹资料

发布于 2026-04-29 08:49:56

1480

CSS3 动画实现无缝滚动效果

我给你做最常用、最实用的两种滚动动画：横向无缝滚动 和 纵向无缝滚动，纯 CSS3 实现，不需要 JS，直接复制就能用。

一、横向无缝滚动（最常用，跑马灯）

适合公告、轮播、标签滚动

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS3 横向滚动</title>
  <style>
    /* 滚动容器：隐藏溢出 */
    .scroll-wrap {
      width: 300px;
      overflow: hidden;
      border: 1px solid #eee;
    }

    /* 滚动内容：执行动画 */
    .scroll-content {
      display: inline-block;
      white-space: nowrap; /* 不换行 */
      animation: rowScroll 10s linear infinite; /* 匀速无限滚动 */
      padding-left: 100%; /* 关键：实现无缝 */
    }

    /* 动画定义：从右 → 左 */
    @keyframes rowScroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-100%);
      }
    }
  </style>
</head>
<body>
  <div class="scroll-wrap">
    <div class="scroll-content">
      CSS3 无缝滚动动画 · 纯 CSS 实现 · 无需 JavaScript · 支持无限循环
    </div>
  </div>
</body>
</html>

核心参数说明

animation: rowScroll 10s linear infinite;
- 10s：滚动一圈的时间（越小越快）
- linear：匀速滚动
- infinite：无限循环
@keyframes：控制从右向左移动

二、纵向无缝滚动（文字向上滚动）

适合公告、消息滚动

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>CSS3 纵向滚动</title>
  <style>
    .scroll-vertical {
      width: 200px;
      height: 30px;
      line-height: 30px;
      overflow: hidden;
      border: 1px solid #eee;
    }

    .scroll-text {
      animation: columnScroll 8s linear infinite;
    }

    /* 从上 → 下滚动 */
    @keyframes columnScroll {
      0% {
        transform: translateY(0);
      }
      100% {
        transform: translateY(-100%);
      }
    }
  </style>
</head>
<body>
  <div class="scroll-vertical">
    <div class="scroll-text">
      这是第一条公告<br>
      这是第二条公告<br>
      这是第三条公告<br>
      这是第四条公告
    </div>
  </div>
</body>
</html>

三、进阶：多元素无缝循环滚动（最实用）

适合图片/多段文字无限循环滚动

/* 横向多元素无缝滚动（推荐） */
.scroll-box {
  width: 100%;
  overflow: hidden;
}
.scroll-list {
  display: flex;
  width: max-content;
  animation: rowLoop 15s linear infinite;
}
.scroll-item {
  padding: 0 20px;
}

@keyframes rowLoop {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

<div class="scroll-box">
  <div class="scroll-list">
    <!-- 内容写两遍，实现真正无缝 -->
    <div class="scroll-item">元素1</div>
    <div class="scroll-item">元素2</div>
    <div class="scroll-item">元素3</div>
    <div class="scroll-item">元素1</div>
    <div class="scroll-item">元素2</div>
    <div class="scroll-item">元素3</div>
  </div>
</div>

四、你可以自由修改的动画属性

属性	作用
`transform: translateX()`	横向滚动
`transform: translateY()`	纵向滚动
`animation-duration`	滚动速度
`animation-direction`	滚动方向（normal/reverse/alternate）
`linear`	匀速
`ease`	先慢后快

总结

纯 CSS3 动画就能做滚动，不需要 JS
横向滚动用 translateX，纵向滚动用 translateY
想要真正无缝：把内容复制一份 + 滚动 50% 距离
控制速度：修改动画时间（5s/10s）

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css3

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

css3

登录后参与评论

0 条评论

热度

CSS3 动画实现无缝滚动效果

CSS3 动画实现无缝滚动效果

CSS3 动画实现无缝滚动效果

一、横向无缝滚动（最常用，跑马灯）

完整代码

核心参数说明

二、纵向无缝滚动（文字向上滚动）

完整代码

三、进阶：多元素无缝循环滚动（最实用）

四、你可以自由修改的动画属性

总结

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐