最稳妥方案是纯CSS的@keyframes配合transform: translateX()实现水平滚动，兼容性好、性能高、语义清晰；需设overflow: hidden、white-space: nowrap，动画从0%到100%完整定义位移，时长依内容动态调整，并为移动端添加will-change: transform触发硬件加速。
别用 <marquee>，它在现代 HTML 标准中已被废弃，Chrome、Firefox 等主流浏览器虽仍能渲染，但不保证行为一致，且无法通过 W3C 验证，更难做无障碍支持和响应式适配。
用 CSS @keyframes 实现水平滚动字幕（兼容性好）
这是目前最稳妥的方案，无需 JS，纯 CSS 控制，可精准响应屏幕宽度变化。
-
@keyframes必须定义从0%到100%的位移，不能只写from/to—— Safari 旧版本会跳帧或不动 - 容器需设固定宽度（如
width: 100vw）并隐藏溢出：overflow: hidden；内部文字需用white-space: nowrap防止换行打断滚动 - 动画时长要按内容长度动态计算：内容越长，
animation-duration越大，否则会“闪退”。粗略公式是duration = (textWidth + containerWidth) / speed，实际建议起始设为20s再微调 - 移动端需加
will-change: transform触发硬件加速，否则 iOS Safari 滚动卡顿明显
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.marquee {
overflow: hidden;
white-space: nowrap;
width: 100%;
}
.marquee span {
display: inline-block;
animation: scroll-left 25s linear infinite;
will-change: transform;
}用 JavaScript 动态控制滚动（适合内容频繁更新）
当公告需要实时增删、暂停/恢复、点击跳转时，CSS 方案就力不从心了。JS 方案核心是控制 scrollLeft 或重绘 transform，而不是操作 DOM 文本流。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 别用
setInterval改scrollLeft——帧率不稳定，容易卡顿；改用requestAnimationFrame同步浏览器刷新节奏 - 监听窗口缩放后必须重算滚动范围：
container.scrollWidth - container.clientWidth，否则 resize 后滚动错位 - 移动端触摸时要暂停滚动：
container.addEventListener('touchstart', () => marquee.pause())，否则用户滑动页面时字幕还在跑，体验割裂 - 若内容含链接，确保
a标签包裹在span内，且不阻止默认事件；否则点击无效
响应式断点下滚动行为怎么处理？
小屏设备（如 iPhone SE）上，一行塞不下太多字，硬滚动会导致文字过快、阅读困难。不能只靠媒体查询改 animation-duration，得换策略。
立即学习“前端免费学习笔记（深入）”；
- 屏幕宽度
< 480px时，建议切换为「逐条淡入」模式：隐藏所有.item，用 JS 轮播显示单条，每条停留 4–5 秒，比滚动更易读 - 用
matchMedia('(max-width: 480px)')监听断点变化，而非仅依赖 CSS 媒体查询——JS 需及时知道当前模式，以决定启动哪套逻辑 - 禁用滚动时，记得清除
requestAnimationFrameID，否则内存泄漏；CSS 动画则需用animation-play-state: paused - 别在
@media里重写整个@keyframes，浏览器不会重新解析动画，只会沿用旧定义
真正麻烦的不是让字动起来，而是让动得“对”：在不同设备上节奏合理、不抢焦点、不遮挡操作区域、支持暂停且恢复自然。很多模板直接把滚动字幕塞进 <header> 顶部栏，结果在折叠屏上被系统状态栏裁掉一半——这种细节，只有真机连着 devtools 测三次以上才看得出来。
