如何实现句子中间文本的滚动效果？

试试这个方案，能精准实现句子中间文本滚动，同时保持首尾文本固定不分离：

HTML 结构 #

把句子拆成首尾固定文本和中间滚动文本三个部分，用flex容器包裹确保它们在同一行：

<div class="text-container">
  <span class="fixed-text">我想要</span>
  <span class="scrolling-wrapper">
    <span class="scrolling-text">制作一个视觉效果超棒的着陆页，优化各种细节，打造独特体验</span>
  </span>
  <span class="fixed-text">的效果</span>
</div>

CSS 实现 #

通过flex布局让各部分对齐，给中间滚动区域设置溢出隐藏，配合动画实现滚动：

.text-container {
  display: flex;
  align-items: center;
  /* 根据需求设置容器宽度，确保中间有滚动空间 */
  width: 500px;
  padding: 10px;
  border: 1px solid #eee;
}

.fixed-text {
  white-space: nowrap;
  margin: 0 8px;
}

.scrolling-wrapper {
  flex: 1;
  overflow: hidden;
  position: relative;
  height: 24px; /* 适配文本高度，避免容器高度跳动 */
}

.scrolling-text {
  position: absolute;
  white-space: nowrap;
  /* 动画时长可根据文本长度调整 */
  animation: scroll-left 12s linear infinite;
}

/* 从右向左滚动的动画 */
@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

可选调整 #

如果想要来回滚动的效果，把动画改成这样：

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

然后给.scrolling-text替换animation: scroll-alternate 15s linear infinite;就行。

这个方案的核心是用flex布局让首尾文本和中间滚动区域保持在同一行，不会分离；同时通过overflow:hidden和动画只让中间文本滚动，首尾完全固定。

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