如何实现页面顶部公告文字左右滚动动画？CSS/JS方案咨询

你完全可以只用CSS实现更简洁、适配性更好的滚动公告，也能通过极简的JavaScript代码辅助实现（但纯CSS方案更适合不懂JS的场景），以下是具体实现方法：

一、纯CSS优化实现（更简便自然） #

你的现有代码用left定位实现滚动，其实可以用transform: translateX()替代，性能更优且无需硬写固定像素值，适配不同屏幕尺寸。同时优化动画逻辑，让文字滚动到右侧后平滑消失再从左侧重新出现：

/* 公告容器：隐藏超出部分，避免影响页面其他元素 */
.announcement-container {
  overflow: hidden;
  background-color: #f5f5f5;
  padding: 8px 0;
}

/* 公告文本：强制不换行，保证滚动连贯性 */
.announcement-text {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-horizontal 13s linear infinite;
}

/* 滚动动画：从左侧外部滚入，到右侧外部滚出 */
@keyframes scroll-horizontal {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(calc(100vw + 100%));
  }
}

<div class="announcement-container">
  <p class="announcement-text">This is an announcement</p>
</div>

关键优化点： #

• 用transform替代position: relative+left，不会触发页面重排，动画更流畅
• calc(100vw + 100%)让文字完全滚出右侧屏幕后再循环，避免突兀跳转
• linear动画函数保持匀速滚动，视觉体验更自然

二、纯CSS无缝滚动方案（更流畅） #

如果想要文字滚动到右侧后，左侧立刻衔接相同文本实现无缝效果，可复制一份文本：

.announcement-container {
  overflow: hidden;
  background-color: #f5f5f5;
  padding: 8px 0;
}

/* 文本包裹容器：用flex让两份文本并排 */
.announcement-wrap {
  display: flex;
  animation: scroll-seamless 20s linear infinite;
}

.announcement-text {
  white-space: nowrap;
  margin-right: 20px; /* 两份文本之间的间距 */
}

@keyframes scroll-seamless {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

<div class="announcement-container">
  <div class="announcement-wrap">
    <p class="announcement-text">This is an announcement</p>
    <p class="announcement-text">This is an announcement</p>
  </div>
</div>

三、极简JavaScript实现（动态场景可用） #

如果你需要动态修改公告内容，可使用以下极简JS代码（无需懂JS，直接复制即可）：

<div class="announcement-container" style="overflow:hidden; background:#f5f5f5; padding:8px 0;">
  <p id="announcement" style="position:relative; white-space:nowrap;">This is an announcement</p>
</div>

<script>
  const el = document.getElementById('announcement');
  let position = -el.offsetWidth; // 初始位置在容器左侧外部
  const speed = 2; // 滚动速度，数值越大越快

  // 定时器每隔20毫秒更新位置
  setInterval(() => {
    position += speed;
    // 滚出右侧屏幕后重置位置
    if (position > window.innerWidth) {
      position = -el.offsetWidth;
    }
    el.style.left = position + 'px';
  }, 20);
</script>

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