寻求实现网站文本跑马灯滚动效果的简易CSS代码

以下是一套轻量且流畅的CSS方案，替代卡顿的<marquee>标签，核心利用CSS动画的GPU加速特性避免性能问题：

HTML结构 #

<div class="ticker-container">
  <div class="ticker-content">
    你的跑马灯文本内容在这里 —— 支持任意长度的文本
    <span class="ticker-duplicate">你的跑马灯文本内容在这里 —— 支持任意长度的文本</span>
  </div>
</div>

CSS代码 #

/* 容器：限制显示区域，隐藏超出部分 */
.ticker-container {
  width: 100%;
  overflow: hidden;
  background: #f5f5f5;
  padding: 8px 0;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
}

/* 滚动内容容器：设置为弹性布局，让文本并排 */
.ticker-content {
  display: flex;
  white-space: nowrap;
  animation: ticker-scroll 15s linear infinite;
}

/* 复制一份文本：避免滚动到末尾出现空白间隙 */
.ticker-duplicate {
  margin-left: 100%;
}

/* 滚动动画：利用transform实现GPU加速的位移 */
@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 鼠标悬停暂停（可选） */
.ticker-container:hover .ticker-content {
  animation-play-state: paused;
}

关键说明 #

• 流畅性保障：使用transform: translateX()实现位移，属于GPU加速属性，不会触发页面重排/重绘，彻底解决<marquee>的卡顿问题
• 无间隙滚动：复制一份文本并设置margin-left:100%，确保第一份文本滚出视野时，第二份文本无缝衔接
• 自定义调整：
  • 修改animation中的15s可以调整滚动速度，数值越小速度越快
  • 自定义.ticker-container的width、background、padding等属性适配你的页面样式
  • 移除.ticker-container:hover部分可以取消悬停暂停功能

内容的提问来源于stack exchange，提问作者Aqib