marquee标签在chrome 120+和firefox 125+中已被完全移除，仅显示为静态文本并报弃用警告；其被w3c标记为obsolete，无标准规范，行为不一致且无障碍支持为零。
为什么marquee直接写就失效
Chrome 120+ 和 Firefox 125+ 已完全移除渲染逻辑，写<marquee>欢迎光临</marquee>只会显示为静态文本，控制台还可能报marquee is deprecated。它不是“兼容性差”，而是标准层面被 W3C 标记为 obsolete——连direction、behavior这些属性都无规范定义，不同浏览器行为不一致，无障碍支持为零。
@keyframes + transform: translateX() 最小可行写法
核心是让文字“从右滚进、滚出左”，靠overflow: hidden截断，靠white-space: nowrap防换行。别用left或margin-left动画，会触发重排。
-
padding-left: 100%必须加在动画元素上（如span），让内容初始位置完全在视口右侧，避免闪动 - 动画
from设transform: translateX(100%)，to设transform: translateX(-100%) - 时长不能硬写
20s：短文本用8s，长文案建议按字符数粗算duration = 字符数 × 0.4s - 若结尾有明显空白停顿，说明内容没重复——把文案复制两遍（如
欢迎|优惠|限时→欢迎|优惠|限时|欢迎|优惠|限时）
鼠标悬停暂停为什么加了:hover却没反应
常见错误是作用对象错位：动画写在span上，但:hover却只写了父容器。
- 正确写法：
.marquee:hover span { animation-play-state: paused; } - 错误写法：
.marquee:hover { animation-play-state: paused; }（父容器没动画，无效） - 移动端默认无
:hover，需补充@media (hover: hover) { ... }或监听touchstart切is-paused类 - 别用
visibility: hidden暂停——会重置动画状态，恢复时从头开始
响应式容器宽度变，滚动就卡顿或飞快怎么办
固定animation-duration值在宽度缩放后必然失准。真正要动态适配的不是时间，而是位移基准。
- 放弃
translateX(100%)这种相对值，改用calc()或 JS 计算实际像素：比如容器宽300px，文案总宽680px，则动画终点应为transform: translateX(-680px) - 用
getBoundingClientRect().width读取文案真实宽度，再注入style或 CSS 变量 - 深色模式、字体大小变化也会改变文案宽度，纯 CSS 难覆盖，复杂场景建议 JS 驱动
- 若用双份文案实现无缝，注意
padding-left: 100%此时应对应单份宽度，而非容器宽
真正麻烦的从来不是“怎么让它动”，而是“动得刚好”——宽度缩放、字体加载延迟、屏幕阅读器跳过、用户偏好设置禁用动画……这些细节一漏，滚动效果就露馅。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
