字幕滚动效果如何设置

CSS 动画（推荐）

这是目前最标准、性能最好的方式,兼容性好且易于控制。

基础水平滚动（从右向左）

<!DOCTYPE html>
<html>
<head>
<style>
  .scrolling-text {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
  }
  .scrolling-text p {
    display: inline-block;
    padding-left: 100%; /* 从最右边开始 */
    animation: scroll-left 10s linear infinite;
  }
  @keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); } /* 向左移动自身宽度 */
  }
</style>
</head>
<body>
<div class="scrolling-text">
  <p>这是一条滚动的字幕信息！欢迎关注我们的最新动态。</p>
</div>
</body>
</html>

控制滚动方向和速度

/* 向左滚动 */
@keyframes scroll-left {
  from { transform: translateX(100%); }
  to { transform: translateX(-100%); }
}
/* 向右滚动 */
@keyframes scroll-right {
  from { transform: translateX(-100%); }
  to { transform: translateX(100%); }
}
/* 向上滚动 */
@keyframes scroll-up {
  from { transform: translateY(100%); }
  to { transform: translateY(-100%); }
}
/* 滚动速度控制 - 修改 animation 中的时间值 */
/* 慢速：慢速20秒，快速：5秒 */
animation: scroll-left 15s linear infinite;  /* 15秒滚动一次 */
animation: scroll-left 5s linear infinite;   /* 5秒滚动一次 */

控制暂停与播放（鼠标悬停暂停）

.scrolling-text p:hover {
  animation-play-state: paused;
}

使用 <marquee> 标签（简单但已过时）

虽然已被W3C标记为过时,但在很多简单场景下依然可以使用。

<!-- 基本滚动：从右到左 -->
<marquee>这是一条滚动的字幕</marquee>
<!-- 带属性控制 -->
<marquee 
  behavior="scroll"     <!-- scroll(滚动) | slide(滑动) | alternate(交替) -->
  direction="left"      <!-- left | right | up | down -->
  scrollamount="5"      <!-- 速度，数字越大越快 -->
  scrolldelay="0"       <!-- 每次延迟(毫秒) -->
  loop="infinite"       <!-- 循环次数 -->
  width="100%"          <!-- 宽度 -->
  height="50px"         <!-- 高度 -->
  bgcolor="#f0f0f0"    <!-- 背景色 -->
  onmouseover="this.stop()"    <!-- 鼠标悬停暂停 -->
  onmouseout="this.start()"    <!-- 鼠标移开继续 -->
>
  这是一条带属性的滚动字幕
</marquee>

常用的属性组合示例：

• 从右向左匀速滚动：<marquee>内容</marquee>
• 从下向上滚动：<marquee direction="up">内容</marquee>
• 来回弹动：<marquee behavior="alternate">内容</marquee>
• 慢速滚动：<marquee scrollamount="2">内容</marquee>

多个字幕同时滚动（无缝衔接）

使用CSS实现多段文字无缝衔接滚动：

<!DOCTYPE html>
<html>
<head>
<style>
  .marquee-container {
    width: 100%;
    overflow: hidden;
    background: #f8f8f8;
    padding: 10px 0;
  }
  .marquee-content {
    display: flex;
    white-space: nowrap;
    animation: marquee 20s linear infinite;
  }
  .marquee-content span {
    padding: 0 50px;
    font-size: 18px;
  }
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); } /* 移动一半内容 */
  }
</style>
</head>
<body>
<div class="marquee-container">
  <div class="marquee-content">
    <span>🎉 第一段内容：欢迎光临！</span>
    <span>📢 第二段内容：限时优惠中！</span>
    <span>💡 第三段内容：活动正在进行...</span>
    <!-- 复制一份，实现无缝衔接 -->
    <span>🎉 第一段内容：欢迎光临！</span>
    <span>📢 第二段内容：限时优惠中！</span>
    <span>💡 第三段内容：活动正在进行...</span>
  </div>
</div>
</body>
</html>

总结建议

最推荐使用 CSS @keyframes 动画 方式,因为它：

• ✅ 性能好（GPU加速）
• ✅ 兼容性好
• ✅ 可自由控制方向、速度、样式
• ✅ 支持悬停暂停等交互

需要其他特殊效果（如垂直滚动、逐条滚动）可以告诉我,我可以给你更具体的代码示例。

标签： Premiere Pro After Effects