已被废弃，现代项目中不该用——浏览器兼容性差、无法控制节奏、无障碍支持为零，且 w3c 明确不推荐。
<marquee></marquee> 已被废弃，现代项目中不该用 —— 浏览器兼容性差、无法控制节奏、无障碍支持为零，且 W3C 明确不推荐。
为什么 <marquee></marquee> 不能用
Chrome 从 90+ 版本起已移除对 <marquee></marquee> 的部分行为支持（比如 direction="up" 失效），Firefox 和 Safari 从未真正支持其全部属性；更关键的是它无法被键盘聚焦、屏幕阅读器跳过、CSS 动画控制粒度为零。实际项目里一旦上线，就等于埋下可访问性和维护隐患。
CSS @keyframes 实现水平滚动文字
用 transform: translateX() 配合 @keyframes 是最可控、最轻量的替代方案：
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.scrolling-text {
white-space: nowrap;
overflow: hidden;
box-sizing: border-box;
}
.scrolling-text span {
display: inline-block;
padding-left: 100%;
animation: scroll-left 20s linear infinite;
}
-
padding-left: 100%是关键：让文字初始位置完全在视口右侧，避免闪动 - 动画时长（
20s）需根据容器宽度和字体大小微调，太短会太快，太长则停顿感明显 - 若内容含中文或图标，建议加
font-variant-east-asian: full-width防止字距异常
需要暂停/鼠标悬停控制时怎么办
纯 CSS 可以通过 :hover 暂停，但要注意：必须作用于动画元素本身，且要用 animation-play-state：
.scrolling-text:hover span {
animation-play-state: paused;
}
- 不能写成
.scrolling-text:hover（没动画的父容器无效） - 移动端默认无
:hover，如需点击暂停，得用 JS 切换 class，例如绑定tap事件后添加is-paused - 若页面有多个跑马灯，别共用同一个
@keyframes名称，否则可能相互干扰
真正难的不是让字动起来，而是让动得稳、停得准、读得清 —— 尤其当文字长度动态变化、容器宽度响应式缩放、或要适配深色模式时，translateX 的起止值和动画时长就得重新算，这时候硬编码的 100% 和 20s 就会立刻露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
