HTML5已废弃标签,应使用CSS @keyframes+animation替代,确保兼容性、性能与可控性;必要时辅以requestAnimationFrame实现JS滚动,兼顾移动端适配与可访问性。

HTML5 里没有 标签了,别硬用
HTML5 正式废弃了 ,哪怕浏览器还能渲染,也属于非标准、不可靠行为。Chrome、Firefox 在某些版本中已限制其自动播放或忽略部分属性(比如 direction="up" 失效)。用它上线,等于埋个兼容性雷。
CSS @keyframes + animation 是最稳妥的替代方案
用纯 CSS 实现滚动,语义清晰、性能好、支持暂停/反向/变速,还能响应式适配。关键不是“怎么动”,而是“怎么控制动得自然”:
-
white-space: nowrap防止文字换行打断滚动流 - 动画时长(
animation-duration)要和内容长度匹配:内容越长,时间越长,否则会卡顿或闪回 - 用
infinite+linear保证匀速无缝循环;避免ease导致首尾速度不一致而露白 - 若需鼠标悬停暂停,加
:hover { animation-play-state: paused; }
示例(水平左滚):
这是一段滚动的文字,支持任意长度
JavaScript 控制滚动更灵活,但别一上来就写轮子
真需要动态增删文字、点击跳转、或与后端数据联动时,才考虑 JS。直接操作 scrollLeft 或 transform 比定时器 setInterval + innerHTML 拼接更稳定:
立即学习“前端免费学习笔记(深入)”;
- 用
requestAnimationFrame替代setInterval,避免丢帧 - 滚动容器必须设
overflow: hidden,子元素宽度要显式计算(offsetWidth或getBoundingClientRect()) - 注意重排(reflow):频繁读写
scrollLeft可能触发强制同步布局,优先用transform动画
简单手动滚动示意(仅核心逻辑):
const marquee = document.querySelector('.js-marquee');
let pos = marquee.scrollWidth;
function animate() {
marquee.scrollLeft = pos;
pos -= 0.5;
if (pos < -marquee.scrollWidth / 2) pos = marquee.scrollWidth;
requestAnimationFrame(animate);
}
animate();
移动端和可访问性容易被忽略的点
跑马灯在手机上常因缩放、横竖屏切换错位;对屏幕阅读器用户,默认是干扰项:
- 加
aria-hidden="true"明确告诉辅助技术“这是装饰性动效,不用读” - 用
@media (prefers-reduced-motion: reduce)关闭动画,尊重系统级动效偏好 - 避免在小屏上用过快滚动——手指滑动时视觉冲突明显,建议检测
window.innerWidth后降速或停用
真正难的不是让字动起来,是让它动得恰到好处:不抢眼、不干扰、不卡顿、不伤眼。滚动速度、停显时机、中断恢复逻辑,这些细节才是上线前必须实测的。










