HTML原生<marquee>标签已废弃，现代项目中不该使用；应采用CSS @keyframes + animation实现可控、可访问的跑马灯，必要时辅以JavaScript动态控制或scrollLeft兼容方案。
HTML 原生 <marquee> 标签已废弃，现代项目中不该用它做跑马灯公告——不是“能不能”，而是“不该用”。
为什么 <marquee> 不能用
它在 HTML5 中被正式移除，所有主流浏览器（Chrome、Firefox、Safari、Edge）虽仍支持但标记为“deprecated”，控制台会报 marquee is deprecated 警告；语义上毫无意义，无障碍（a11y）完全不可读，屏幕阅读器直接跳过；动画节奏、暂停、方向等行为不一致，比如 behavior="slide" 在 Safari 下无效。
CSS @keyframes + animation 实现平滑滚动
用纯 CSS 实现更可控、可访问、可维护。核心思路是：让容器定宽+隐藏溢出，内部元素宽度超父容器，再通过 translateX 循环位移。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 必须设置
white-space: nowrap防止文字换行打断滚动 - 动画时长需根据内容长度动态计算，否则太快看不清、太慢显卡顿
- 加
will-change: transform提升动画性能（尤其长文本） - 鼠标悬停暂停要用
:hover+animation-play-state: paused
.marquee {
overflow: hidden;
white-space: nowrap;
}
.marquee span {
display: inline-block;
padding-left: 100%;
animation: scroll 20s linear infinite;
will-change: transform;
}
@keyframes scroll {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
JavaScript 控制启停与动态更新内容
当公告需要实时替换、手动暂停/播放、或响应后端推送时，CSS 动画不够用，得靠 JS 操作 animationPlayState 或重置动画。
常见操作：
- 暂停：
el.style.animationPlayState = 'paused' - 恢复：
el.style.animationPlayState = 'running' - 更新内容后重启动画：先
el.style.animation = 'none'，void el.offsetWidth强制重排，再恢复animation值 - 避免内存泄漏：用
requestAnimationFrame替代setInterval做轮播切换
替代方案：用 scrollLeft + 定时器做兼容性兜底
某些老旧内网系统仍需支持 IE11，@keyframes 兼容性不足，此时可用 JS 操控 scrollLeft 模拟滚动。注意：
- 必须设容器
scroll-behavior: auto（IE 默认 smooth 会卡顿） - 每次滚动步长建议 ≤ 1px，避免跳跃感
- 监听
scrollLeft === scrollWidth - clientWidth判断到尾，立即重置为 0 并preventDefault()防止回弹 - 移动端需额外处理 touchstart/touchend 阻止默认滚动行为
真正难的不是让字动起来，而是让动得稳、停得准、换得顺、读得见——尤其是滚动中突然插入新公告，或用户用键盘导航时焦点不丢失，这些细节没封装好，就只是个会动的 bug。
