marquee标签已废弃，必须用CSS动画实现滚动；应使用transform: translateX()配合@keyframes，设overflow: hidden和white-space: nowrap，按内容长度动态调整动画时长，并注意字体加载与交互事件处理。
滚动文字用 marquee 标签？别用了，它已废弃
HTML5 不再支持 marquee，现代浏览器可能渲染异常或完全忽略。强行使用会导致语义错误、无障碍访问失败，且无法响应式适配。必须改用 CSS 动画 + 结构化容器实现。
CSS @keyframes 滚动动画怎么写才不卡顿
关键不是“动起来”，而是“动得稳”。直接对 transform: translateX() 做动画，避免触发布局（layout）和绘制（paint），只走合成层（compositor）：
@keyframes scroll-left {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
.scrolling-text {
animation: scroll-left 20s linear infinite;
white-space: nowrap;
}- 时间值（如
20s）需根据内容长度动态调整：文字越长，时间越长，否则会出现跳帧或突兀回弹 - 务必加
white-space: nowrap，否则换行会打断滚动流 - 禁用
margin/padding在动画元素上做位移——它们触发重排，导致掉帧
多段文字嵌套时，为什么外层容器要设 overflow: hidden
滚动本质是“内容溢出 + 容器裁剪 + 位移模拟”。没有 overflow: hidden，滚动内容会撑开父容器、破坏布局，甚至在 Safari 中出现滚动条闪现或动画中断。
- 每层滚动容器（比如一个轮播区里嵌另一个跑马灯）都必须独立设置
overflow: hidden - 若内层文字需点击交互，记得加
pointer-events: auto（因为某些情况下transform会意外影响事件捕获） - 不要依赖
display: inline-block或float来排列多段滚动块——用flex或grid更可控
如何让多段滚动互不干扰又保持同步节奏
常见误区是给所有段落套同一个动画名和时长，结果因内容长度不同，视觉节奏错乱。正确做法是按内容量差异化控制：
立即学习“前端免费学习笔记（深入）”；
- 用 JS 读取每段文字的
scrollWidth和容器clientWidth，动态计算动画时长：duration = (scrollWidth / speed) * 1000 - 或用 CSS 自定义属性预设：
style="--scroll-duration: 25s;"，再在@keyframes中引用（需配合animation写法支持变量） - 若需暂停/播放控制（如 hover 暂停），统一用
animation-play-state: paused，而非重置transform——后者会丢失当前动画位置
最易被忽略的是字体加载时机：font-display: swap 可能造成滚动中文字突然变宽，引发位移抖动。建议用 font-display: optional 或预加载关键字体。
