HTML5已完全废弃标签，其color属性无效；应使用CSS动画+语义化元素（如div），通过color和@keyframes实现可控滚动文字。
滚动文字用的是 <marquee></marquee> 标签？先停一下
HTML5 已经**完全废弃** <marquee></marquee> 标签，它不是标准、不被推荐、在现代浏览器中可能失效或行为不一致。直接对 <marquee></marquee> 用 color 属性（比如写成 <marquee color="red"></marquee>）根本无效——这个属性从来就不是 HTML 规范的一部分，纯属某些旧浏览器的私有扩展，现在基本不可靠。
CSS 控制滚动文字颜色的正确姿势
要用标准方式实现滚动效果，必须用 CSS 动画 + 普通元素（如 <div> 或 <code><p></p>），再通过 color 设置文字颜色。关键点是：颜色控制和滚动逻辑完全解耦。
- 把文字包在
<div class="scroll-text">Hello World</div>这类语义化标签里 - 用
@keyframes定义位移动画（比如transform: translateX()） -
color直接写在该元素的 CSS 规则里，例如.scroll-text { color: #2563eb; } - 别忘了加
white-space: nowrap防止文字换行打断滚动
示例片段：
.scroll-text {
color: #dc2626;
white-space: nowrap;
overflow: hidden;
animation: scroll-left 10s linear infinite;
}
<p>@keyframes scroll-left {
from { transform: translateX(100%); }
to { transform: translateX(-100%); }
}为什么不能用 font 标签或内联 style="color:" 在 <marquee></marquee> 里？
即使你硬写 <marquee><font color="blue">Text</font></marquee>，或者 <marquee style="color:red">Text</marquee>，结果大概率是：文字颜色没变，或者只变背景/边框色，甚至整个滚动失效。因为 <marquee></marquee> 的渲染机制不遵循标准 CSS 继承规则，color 不会自动下传到子内容，且不同浏览器解析差异极大。
立即学习“前端免费学习笔记（深入）”；
- Chrome/Firefox：忽略
color声明，按父级或默认色显示 - Safari：可能触发渲染异常，导致文字闪烁或卡顿
- 移动端 WebView：多数直接禁用
<marquee></marquee>解析
兼容性与可维护性提醒
用 CSS 动画替代 <marquee></marquee> 后，color 能正常生效，但要注意几个真实坑点：
- 动画时间（
10s）需根据文字长度动态调整，否则太快看不清、太慢显呆滞 - 使用
will-change: transform可提升滚动流畅度，尤其长文本或低性能设备 - 若需暂停（如 hover 停止），得额外加
animation-play-state: paused，原生<marquee></marquee>的behavior="pause"在 CSS 方案里不存在 - 无障碍（a11y）方面，CSS 滚动默认无暂停机制，建议加「暂停/播放」按钮并用
aria-live注明状态
真正改颜色不难，难的是放弃 <marquee></marquee> 这个思维惯性——它看起来简单，实则埋了兼容、维护、可访问三重雷。
