1. 温度参数与滚动效果的关系
在实现滚动文字的过程中，temperature=0.6 作为一个直观的拟合参数，帮助设计者理解滚动节奏与视觉密度的关系。温度参数映射到滚动速度和缓动曲线，能够使文本滚动的表现力更丰富。
通过将该温度值映射到 滚动速度 和 缓动曲线，可以获得更具表现力的滚动文字效果。
本文旨在给出一个 CSS/JS 实现全解，从基础的 CSS 横向跑马灯到可控的 JS 动态滚动，覆盖主流场景。
// 使用 temperature 控制滚动速度的简例
const temperature = 0.6;
const baseSpeedPxPerSecond = 60;
const speed = baseSpeedPxPerSecond * (1 + (temperature - 0.5)); // 介于 30~90 之间
2. 纯 CSS 实现滚动文字
核心思路与实现要点
核心思路是让文本在一个 overflow: hidden 的容器内不断平移，配合 transform: translateX 产生连续滚动的错觉。此方法无需 JavaScript，对资源消耗小，适合简单场景。
为了实现无缝循环，通常需要把文本内容重复放置，并让一个子元素持续出画面。此处的关键点是 动画时长、容器宽度和文本宽度 的比例关系，以及 浏览器重绘最小化 的技巧。
/* 基本横向跑马灯 CSS 示例 */
.marquee {overflow: hidden;white-space: nowrap;position: relative;
}
.marquee__inner {display: inline-block;padding-left: 100%; /* 第一轮进入视口的起点 */animation: marquee 10s linear infinite;
}
@keyframes marquee {from { transform: translateX(0%); }to { transform: translateX(-100%); }
}
<div class="marquee" aria-label="滚动文本" role="marquee"><div class="marquee__inner"><span>滚动文本示例滚动文本示例滚动文本示例</span><span>滚动文本示例滚动文本示例滚动文本示例</span></div>
</div>3. 结合 JS 实现更灵活的滚动效果
使用 requestAnimationFrame 实现平滑滚动
当需要动态控制速度、初始暂停、暂停/继续等行为时，requestAnimationFrame 提供高效且流畅的更新路径。结合文本克隆实现 无缝滚动，可以在不同屏幕宽度下保持一致的视觉效果。
实现要点包括：对比时间戳来得到 dt、根据 dt 计算位移、在边界时重置偏移，同时确保 DOM 结构有足够的文本长度以避免空白。
// 基本的无缝横向滚动示例
const marquee = document.querySelector('.marquee');
const inner = document.querySelector('.marquee__inner');
let offset = 0;
let last = performance.now();function tick(now) {const dt = (now - last) / 1000;last = now;const speed = 80; // px/s，可与 temperature 类比offset -= speed * dt;if (offset <= -inner.scrollWidth) {offset = 0;}inner.style.transform = `translateX(${offset}px)`;requestAnimationFrame(tick);
}
requestAnimationFrame(tick);
<div class="marquee" aria-label="无缝滚动文本"><div class="marquee__inner"><span>滚动文本示例滚动文本示例滚动文本示例</span></div>
</div>.marquee { overflow: hidden; }
.marquee__inner { display: inline-block; will-change: transform; }4. 不同场景下的滚动文字应用
轮播文本、跑马灯、文本溢出处理
在网页广告、新闻头条或产品描述栏中，滚动文字常被用作轮播文本或跑马灯。要点是确保文本可读性、控制滚动速度、以及在短文本时避免突兀的跳动。
对于文本溢出，建议采取两阶段策略：第一阶段显示滚动文本，第二阶段在离开屏幕后重新进入，以实现持续循环。此处 可通过 clone 节点实现，并将动画时间与文本长度相关联。
/* 兼容性考虑：使用 CSS 变量控制速度 */
:root { --marquee-speed: 10s; }
.marquee__inner { animation: marquee linear infinite; }
@keyframes marquee {from { transform: translateX(0); }to { transform: translateX(-50%); } /* 具体值随内容数量调整 */
}
<div class="marquee" aria-label="轮播文本"><div class="marquee__inner"><span>第一条文本</span><span>第二条文本</span></div>
</div>5. 可访问性与兼容性注意事项
无障碍性设计要点
为确保可访问性，务必为滚动文本提供可读性友好的对比度、可控的暂停与屏幕阅读器支持。可以使用 aria-label、aria-live 等属性来改善可访问性体验。
同时需要考虑兼容性，老版本浏览器对 CSS 变量、@keyframes 的支持有限，可在样式中提供回退方案，并尽量避免让滚动成为页面核心交互，避免对用户造成困扰。
<div class="marquee" aria-label="滚动文字示例" aria-live="polite"><div class="marquee__inner">滚动文本示例</div>
</div>/* 回退样式示例（不使用 CSS 变量） */
.marquee { overflow: hidden; /* 等同于 drop shadow 及让文本可见 */ }
