marquee 的 direction 属性无法用 CSS 直接替代，因其是废弃标签的内置属性；现代方案必须用 @keyframes + transform（translateX/translateY）实现左右或上下滚动动画，配合 overflow: hidden 和 white-space: nowrap 等样式确保无缝、高性能滚动。
marquee 的 direction 属性不能用 CSS 替代
HTML 的 direction（如 left、right、up、down）是内建属性，**没有对应的 CSS 属性可直接替换**。浏览器早已废弃 ，现代方案必须用 CSS 动画模拟滚动效果。
CSS 实现左右滚动：用 @keyframes + transform: translateX()
要复现 效果，核心是让内容在容器内持续水平位移：
- 父容器设
overflow: hidden，隐藏超出部分 - 子元素用
display: inline-block或white-space: nowrap防换行 - 动画关键帧从
translateX(100%)开始（完全移入），到translateX(-100%)结束（完全移出） - 动画时长和延迟需匹配内容长度，否则会出现“跳帧”或停顿
示例：
.marquee {
overflow: hidden;
white-space: nowrap;
}
.marquee span {
display: inline-block;
animation: scroll-left 10s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
上下滚动怎么写？改用 translateY() 和方向起止值
direction="up" 对应垂直滚动，只需把 X 换成 Y，但起止值逻辑要反着理解：
- 向上滚动 = 内容从底部进入，顶部离开 → 动画从
translateY(100%)到translateY(-100%) - 向下滚动则反过来：从
translateY(-100%)到translateY(100%) - 注意：若内容高度 > 容器高度，需确保动画距离覆盖完整内容高度，否则滚动不连贯
简单上下滚动示例（向上）：
@keyframes scroll-up {
0% { transform: translateY(100%); }
100% { transform: translateY(-100%); }
}
为什么不用 scroll-behavior 或 overflow-anchor？
这两个 CSS 属性和滚动字幕无关：scroll-behavior 控制页面内锚点跳转是否平滑，overflow-anchor 影响滚动位置记忆。它们都不触发或控制连续动画式滚动。真正可控的只有 @keyframes + transform 组合 —— 因为 GPU 加速、性能好、兼容性稳（IE10+ 支持）。
别试图给 加 CSS 覆盖 direction，它不会生效；也别用 JS 定时修改 scrollLeft，卡顿明显。动画位移才是唯一靠谱路径。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
