CSS怎样制作跑马灯文字？animation位移

要实现无缝跑马灯文字效果，核心是复制内容并配合css动画完成平滑位移，1. 使用html结构包含重复的文本内容以确保视觉衔接；2. 通过css设置容器overflow: hidden和white-space: nowrap隐藏溢出内容并防止换行；3. 利用padding-left: 100%将滚动内容起始位置移至容器右侧外；4. 定义@keyframes动画，从transform: translatex(0)到translatex(-100%)实现向左连续滚动；5. 应用animation属性设置线性无限循环动画，并通过:hover暂停提升可访问性；6. 添加will-change: transform优化渲染性能；7. 在响应式设计中根据屏幕尺寸调整动画速度或降级为静态显示；8. 对动态内容需用javascript控制动画启停与宽度计算以保证无缝效果，最终形成流畅、可控、兼容性好的跑马灯，完整实现现代web中替代传统marquee标签的优雅解决方案。

要用CSS制作跑马灯文字，核心是利用

@keyframes

transform: translateX()

overflow: hidden

解决方案

制作一个基本的跑马灯文字效果，我们需要一个容器来限定显示区域，以及一个或多个文本元素在其中滚动。

HTML 结构：

立即学习“前端免费学习笔记（深入）”；

<div class="marquee-container">
  <div class="marquee-content">
    <span>这是一个跑马灯文字示例，文字会从右向左滚动。</span>
    <span>这是第二段内容，也可以跟着一起滚动。</span>
    <!-- 为了实现无缝循环，通常会复制内容 -->
    <span>这是一个跑马灯文字示例，文字会从右向左滚动。</span>
    <span>这是第二段内容，也可以跟着一起滚动。</span>
  </div>
</div>

CSS 样式：

.marquee-container {
  width: 100%; /* 或者固定宽度 */
  overflow: hidden; /* 隐藏超出容器的内容 */
  white-space: nowrap; /* 确保文字不换行 */
  box-sizing: border-box; /* 边框和内边距包含在宽度内 */
  border: 1px solid #ccc; /* 方便观察效果 */
  padding: 10px 0;
  position: relative; /* 为内容定位做准备 */
}

.marquee-content {
  display: inline-block; /* 确保内容在同一行 */
  padding-left: 100%; /* 从容器右侧完全移入开始 */
  animation: scroll-left 15s linear infinite; /* 动画名称、时长、速度曲线、无限循环 */
  /* 优化性能，提前告知浏览器此元素将进行位移 */
  will-change: transform;
}

.marquee-content span {
  display: inline-block; /* 确保每个span都在一行 */
  margin-right: 50px; /* 文字之间的间距 */
}

/* 定义动画关键帧 */
@keyframes scroll-left {
  0% {
    transform: translateX(0%); /* 初始位置，内容完全在右侧 */
  }
  100% {
    transform: translateX(-100%); /* 结束位置，内容完全在左侧，实现循环 */
  }
}

/* 鼠标悬停时暂停动画 */
.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

这段代码通过将

.marquee-content

padding-left

100%

translateX(-100%)

marquee-content

为什么传统的

<marquee>

登录后复制

标签不推荐使用，以及CSS方案的优势在哪里？

说实话，每次看到网站还在用那个老旧的

<marquee>

相比之下，CSS方案的优势简直是碾压式的。首先，它提供了精细到极致的控制。你可以调整动画的时长、速度曲线（

linear

ease-in

ease-out

<marquee>

transform

如何让跑马灯文字实现无缝循环，避免突然跳动？

实现无缝循环是跑马灯效果的关键，也是很多人初次尝试时容易遇到“跳动”问题的地方。我见过不少朋友直接让文字从

transform: translateX(0)

translateX(-100%)

快转字幕

新一代 AI 字幕工作站，为创作者提供字幕制作、学习资源、会议记录、字幕制作等场景，一键为您的视频生成精准的字幕。

357

查看详情

要解决这个问题，核心思路是让动画的起点和终点在视觉上衔接起来。最直接有效的方法是复制内容。比如，你的滚动内容是“你好，世界！”，那么在HTML结构里，你实际放入的可能是“你好，世界！你好，世界！”（或者更多份）。然后，让整个包含这些内容的元素进行位移。

具体来说，就是像我前面解决方案里展示的那样：

1. 容器宽度固定，并设置

   overflow: hidden;

   登录后复制
   。
2. 滚动内容元素（

   .marquee-content

   登录后复制
   ）的宽度要大于容器的宽度，并且包含重复的文本。
3. 动画的起始点：让滚动内容元素从容器的右侧完全移入开始。这可以通过给

   .marquee-content

   登录后复制
   设置

   padding-left: 100%;

   登录后复制
   来实现，这样它的实际内容会从屏幕外开始。
4. 动画的结束点：让滚动内容元素向左移动，直到第一份内容的末尾刚好滚出屏幕，同时第二份内容的开头正好进入屏幕。在我的例子中，

   @keyframes

   登录后复制
   的

   100%

   登录后复制
   处设置为

   transform: translateX(-100%);

   登录后复制
   ，这里的

   -100%

   登录后复制
   是相对于

   .marquee-content

   登录后复制
   自身宽度的位移。如果

   .marquee-content

   登录后复制
   的宽度恰好是其内部所有文本宽度之和的两倍（因为复制了一份），那么这个位移量就能保证无缝衔接。

这种方式的好处是，无论你的文字多长，只要你复制了足够多的份数，并且动画位移的距离和内容总长度匹配，就能实现视觉上的无限循环，没有丝毫的卡顿或跳跃感。它就像一个无限的传送带，文字源源不断地从一边出现，又从另一边消失。

在实际项目中应用跑马灯文字时，有哪些常见的陷阱和优化建议？

在实际项目中应用跑马灯文字，远不止写几行CSS那么简单，有很多细节需要考虑，否则可能会带来意想不到的问题。

首先，可访问性是重中之重。我之前提到过，不停滚动的文字对某些用户来说是阅读障碍。所以，一个基本的优化是提供暂停/播放功能。最简单的方式就是我代码里写的

:hover

aria-live="off"

"polite"

其次是性能。虽然

transform

will-change: transform;

transform

will-change

再来是响应式设计。跑马灯文字在不同屏幕尺寸下的表现可能会大相径庭。手机屏幕小，文字可能很快就滚过去了，或者显示不全。PC端屏幕大，文字可能显得太慢。你需要考虑如何根据屏幕宽度调整动画速度（比如通过CSS变量或JavaScript），或者在小屏幕上干脆禁用跑马灯效果，直接显示静态文字。我通常会倾向于在小屏幕上简化，毕竟用户体验是第一位的。

最后，内容管理。如果跑马灯的内容是动态加载的，比如来自后端接口，你需要确保在内容加载完成后再启动动画，否则可能会出现空白或者内容闪烁。同时，如果内容长度变化很大，你可能需要用JavaScript来动态计算

.marquee-content

以上就是CSS怎样制作跑马灯文字？animation位移的详细内容，更多请关注php中文网其它相关文章！