marquee 的 direction 属性无法用 CSS 直接替代，因其是废弃标签的内置属性；现代方案必须用 @keyframes + transform（translateX/translateY）实现左右或上下滚动动画，配合 overflow: hidden 和 white-space: nowrap 等样式确保无缝、高性能滚动。
marquee 的 direction 属性不能用 CSS 替代
HTML <marquee></marquee> 的 direction（如 left、right、up、down）是内建属性，**没有对应的 CSS 属性可直接替换**。浏览器早已废弃 <marquee></marquee>，现代方案必须用 CSS 动画模拟滚动效果。
CSS 实现左右滚动：用 @keyframes + transform: translateX()
要复现 <marquee direction="left"></marquee> 效果，核心是让内容在容器内持续水平位移：
- 父容器设
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，但起止值逻辑要反着理解：
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
立即学习“前端免费学习笔记（深入）”；
- 向上滚动 = 内容从底部进入，顶部离开 → 动画从
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+ 支持）。
别试图给 <marquee></marquee> 加 CSS 覆盖 direction，它不会生效；也别用 JS 定时修改 scrollLeft，卡顿明显。动画位移才是唯一靠谱路径。
