应弃用已废弃的<marquee>标签，改用CSS @keyframes + transform实现无缝滚动通知：设white-space: nowrap、overflow: hidden，动画从translateX(100%)到translateX(-100%)，配合linear时序与touch-action: none防手势冲突。
用 marquee 实现最简自动滚动，但不推荐
浏览器原生支持 <marquee> 标签，写一行就能滚动：
<marquee behavior="scroll" direction="left">新版本上线啦！</marquee>但它早已被 W3C 废弃，Chrome 125+ 开始彻底禁用，Firefox 和 Safari 也仅保留兼容性渲染、无事件响应能力。实际项目中一旦用户升级浏览器，通知直接消失或卡死。
用 CSS @keyframes + transform 替代，控制更稳
核心思路是让通知容器水平位移，配合 animation 循环播放。关键点不在“动”，而在“无缝衔接”和“响应式适配”：
-
white-space: nowrap防止文字换行打断滚动流 - 动画终点设为
transform: translateX(-100%)，起点为translateX(100%)，确保内容完全移出视口再重置 - 用
animation-timing-function: linear避免加速/减速导致节奏突兀 - 容器需设
overflow: hidden，否则滚动时边缘会漏出
示例片段：
<div class="notice-bar"><span>系统维护中｜预计恢复时间：今日18:00</span></div>
.notice-bar { overflow: hidden; white-space: nowrap; }<br>.notice-bar span { display: inline-block; animation: scroll-left 20s linear infinite; }<br>@keyframes scroll-left {<br> 0% { transform: translateX(100%); }<br> 100% { transform: translateX(-100%); }<br>}
JavaScript 动态更新内容时，必须重置动画
CSS 动画不会因 DOM 内容变化自动重启，直接 innerText 赋值后滚动会卡住或跳帧。正确做法是临时移除动画类，再加回：
立即学习“前端免费学习笔记（深入）”；
- 给
span加一个固定类名如notice-text - 更新内容后执行：
const el = document.querySelector('.notice-text');<br>el.classList.remove('animated');<br>void el.offsetWidth; // 强制重排，触发重绘<br>el.classList.add('animated'); - 或者更稳妥：用
el.style.animation = 'none';清空，再赋回完整动画声明
移动端滑动冲突与性能陷阱
在 iOS Safari 或部分安卓 WebView 中，transform 滚动可能被判定为“可滚动区域”，导致手指滑动时通知条意外暂停或跳动：
- 加
touch-action: none到通知容器，禁止默认手势干预 - 避免在
@keyframes中使用left/right，只用transform: translateX()，否则触发回流（reflow）拖慢帧率 - 如果通知内容频繁更新（如每秒轮播），建议用
requestAnimationFrame批量合并 DOM 操作，而不是每次innerHTML直接写入
滚动速度调得太快，小屏设备上文字一闪而过；太慢又显呆滞——实际测试中，20–30 秒一圈对中等长度文案最自然。别忘了留出左右 padding，不然文字贴边滚动会显得局促。
