css如何实现文字滚动跑马灯效果_使用keyframes和translateX动画实现

新闻中心 NEWS CENTER

您当前位置：首页 > 新闻中心 > 网络学院

css如何实现文字滚动跑马灯效果_使用keyframes和translateX动画实现

2025-12-03

浏览次数：次

返回列表

使用CSS的@keyframes和transform: translateX()可实现高性能跑马灯效果，通过overflow: hidden隐藏溢出内容，white-space: nowrap防止换行，结合animation实现从右向左的连续滚动；进阶方案可通过双倍文本配合translateX(-50%)实现无缝滚动，适用于通知栏、榜单等场景，无需J*aScript即可完成。

css如何实现文字滚动跑马灯效果_使用keyframes和translatex动画实现

要实现文字滚动的跑马灯效果，可以使用 CSS 的 @keyframes 和 transform: translateX() 配合完成。这种方式性能好、兼容性高，适合在 banner、通知栏、榜单等场景中使用。

基本原理

通过定义关键帧动画，让文本容器从右向左平移（或反之），实现连续滚动的效果。核心是利用 translateX 控制元素水平位移，并结合容器的溢出隐藏（overflow: hidden）来制造“跑动”的视觉感。

HTML 结构

<div class="marquee-container">
  <div class="marquee-text">
    欢迎访问我们的网站！最新活动火热进行中，点击了解更多详情……
  </div>
</div>

CSS 样式与动画实现

设置外层容器限制宽度并隐藏溢出，内层文本设置白空间不换行，并通过 keyframes 定义从右到左的平移动画。

.marquee-container {
  width: 100%;
  max-width: 800px;
  overflow: hidden;
  white-space: nowrap;
  margin: 0 auto;
  background-color: #f0f0f0;
  padding: 10px;
  border-radius: 4px;
}
<p>.marquee-text {
display: inline-block;
font-size: 18px;
color: #333;
animation: marqueeAnimation 10s linear infinite;
}</p><p>@keyframes marqueeAnimation {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}</p>

关键点说明

overflow: hidden：确保文本超出容器的部分被隐藏，形成“进入/离开”视觉效果。
white-space: nowrap：防止文本自动换行，保持一行显示。
display: inline-block：使文本内容可被整体移动。
translateX(100%) → translateX(-100%)：从右侧完全进入，移动到左侧完全离开。
animation-timing-function: linear：保证滚动速度均匀。
infinite：实现无限循环滚动。

进阶优化：无缝滚动

如果希望实现更平滑的无缝滚动（比如文本重复出现），可以通过复制内容或使用伪元素扩展长度，再调整动画距离。

来画数字人|直播|

来画数字人自动化|直播|，无需请真人主播，即可实现24小时|直播|，无缝衔接各大|直播|平台。

57 查看详情来画数字人直播

/* 示例：双倍文本无缝滚动 */
.marquee-text {
  animation: marqueeSmooth 12s linear infinite;
  white-space: nowrap;
}
<p>@keyframes marqueeSmooth {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}</p><p>/<em> 需配合将内容重复一次，或用 JS 动态生成双倍宽度 </em>/</p>

基本上就这些。使用 keyframes 和 translateX 实现跑马灯简单高效，无需 J*aScript，适合大多数静态滚动需求。注意控制动画时长以适应文本长度，避免过快或过慢影响阅读体验。

以上就是css如何实现文字滚动跑马灯效果_使用keyframes和translateX动画实现的详细内容，更多请关注其它相关文章！

# javascript # 澄海网站建设设计 # 上海营销推广收费标准表 # 家装网站推广找哪家公司 # 咖啡营销号怎么做推广的 # 网站优化备案怎么弄出来 # 学seo优化很难吗 # 石家庄seo付费 # 福州网站建设招标公司 # 百度怎样查看关键词排名 # 相关文章 # 各大 # 适用于 # 不均匀 # 榜单 # 中不 # 换行 # 如何实现 # 进阶 # 跑马灯 # overflow # ai # 伪元素 # js # html # java # css # 石狮推广短视频营销服务价格