本文目录导读：
设置字幕滚动效果常用方法有3种：CSS动画（最推荐，最灵活）、HTML <marquee>（最简单但已废弃）以及JavaScript（最强大）,以下是最实用的实现方式：
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>
总结建议
| 场景 | 推荐方法 | 理由 |
|---|---|---|
| 简单的文字滚动 | <marquee> |
一行代码搞定 |
| 需要控制样式/动画 | CSS动画 | 最灵活、性能好 |
| 复杂交互（暂停、事件） | CSS + JavaScript | 可定制性强 |
| 新闻/公告栏 | CSS无缝滚动 | 视觉效果好 |
最推荐使用 CSS @keyframes 动画 方式,因为它：
- ✅ 性能好（GPU加速）
- ✅ 兼容性好
- ✅ 可自由控制方向、速度、样式
- ✅ 支持悬停暂停等交互
需要其他特殊效果（如垂直滚动、逐条滚动）可以告诉我,我可以给你更具体的代码示例。
标签： Premiere Pro After Effects
版权声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。
