HTML怎么做跑马灯公告_HTML跑马灯公告通知实现【干货】-html教程-PHP中文网

html原生标签已废弃，现代项目中不该使用；应采用css @keyframes + animation实现可控、可访问的跑马灯，必要时辅以javascript动态控制或scrollleft兼容方案。

html怎么做跑马灯公告_html跑马灯公告通知实现【干货】

HTML 原生 <marquee></marquee> 标签已废弃，现代项目中不该用它做跑马灯公告——不是“能不能”，而是“不该用”。

为什么 `<marquee></marquee>` 不能用

它在 HTML5 中被正式移除，所有主流浏览器（Chrome、Firefox、Safari、Edge）虽仍支持但标记为“deprecated”，控制台会报 marquee is deprecated 警告；语义上毫无意义，无障碍（a11y）完全不可读，屏幕阅读器直接跳过；动画节奏、暂停、方向等行为不一致，比如 behavior="slide" 在 Safari 下无效。

CSS `@keyframes` + `animation` 实现平滑滚动

用纯 CSS 实现更可控、可访问、可维护。核心思路是：让容器定宽+隐藏溢出，内部元素宽度超父容器，再通过 translateX 循环位移。

关键点：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

必须设置 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。