如何实现类似processform.studio底部的无限文字滚动？WordPress实现方案

无需插件实现步骤 #

1. 插入HTML结构 #

在需要展示滚动效果的位置（比如底部小工具区域、自定义页面模板）添加以下代码：

<div class="marquee-container">
  <div class="marquee-content">
    <span>文字内容1</span>
    <span>文字内容2</span>
    <span>文字内容3</span>
    <!-- 按需添加更多内容项 -->
  </div>
  <!-- 复制内容实现无缝循环，避免滚动末尾出现空白 -->
  <div class="marquee-content">
    <span>文字内容1</span>
    <span>文字内容2</span>
    <span>文字内容3</span>
  </div>
</div>

2. 添加CSS样式 #

进入WordPress后台「外观」→「自定义」→「额外CSS」，粘贴以下样式代码：

.marquee-container {
  width: 100%;
  overflow: hidden;
  background: #f0f0f0; /* 可自定义背景色 */
  padding: 12px 0;
}

.marquee-content {
  display: flex;
  gap: 45px; /* 调整文字间的距离 */
  white-space: nowrap;
  animation: marquee-scroll 22s linear infinite;
}

.marquee-content span {
  font-size: 17px; /* 自定义文字大小 */
  color: #222; /* 自定义文字颜色 */
}

/* 定义滚动动画 */
@keyframes marquee-scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

/* 鼠标悬停时暂停滚动（可选功能） */
.marquee-container:hover .marquee-content {
  animation-play-state: paused;
}

可以根据需求调整动画时长、间距、颜色等参数，复制两份内容是为了实现无缝循环，滚动到末尾时不会出现空白断层。

3. 移动端适配（可选） #

如果需要优化移动端显示效果，添加媒体查询代码：

@media (max-width: 768px) {
  .marquee-content {
    gap: 25px;
    animation-duration: 16s;
  }
  .marquee-content span {
    font-size: 15px;
  }
}

插件实现方案 #

如果不想手动编写代码，推荐以下几款轻量插件：

• Simple Marquee：操作极简，支持自定义滚动方向、速度、文字样式，可直接在文章、页面或小工具中插入滚动效果，无需代码基础。
• WP Marquee：专门为滚动文字设计的插件，支持无缝无限循环、水平/垂直滚动模式，还能设置悬停暂停，功能全面且易用。
• T(-) Countdown Widget：虽主打倒计时功能，但内置滚动文字模块，可配置无限循环滚动，适合需要额外功能的场景。

安装插件后，按照后台的设置向导配置内容、样式和滚动参数即可快速实现效果。

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