不推荐使用已废弃的<marquee>标签，应采用CSS @keyframes动画或JavaScript方案实现滚动效果；CSS方案需复制文本、设置translateX位移与无限循环，JS方案则便于动态控制暂停/加速等交互。
用 <marquee> 标签最简单但不推荐
直接写 <marquee>欢迎访问我们的网站！</marquee> 确实能滚动，但它早已被 HTML5 废弃，Chrome、Firefox、Safari 都不保证支持，部分新版浏览器会完全忽略或触发控制台警告 marquee is deprecated。它没有 CSS 控制能力，无法响应式适配，也不能绑定事件或做动画暂停/加速等交互。
CSS @keyframes + animation 是现代方案
核心思路是让文字容器在固定宽度内水平位移，利用 animation-timing-function: linear 保持匀速，并通过 animation-iteration-count: infinite 实现循环。关键要处理首尾衔接——通常把原文本复制一次拼接，再让动画位移距离刚好等于单份文本宽度。
常见写法示例：
<div class="marquee">
<span>前端开发 | 后端开发 | UI设计 | 测试工程师 | 运维支持</span>
<span>前端开发 | 后端开发 | UI设计 | 测试工程师 | 运维支持</span>
</div>
<p><style>
.marquee {
white-space: nowrap;
overflow: hidden;
width: 100%;
}
.marquee span {
display: inline-block;
animation: scroll 20s linear infinite;
}
.marquee span:nth-child(2) {
margin-left: 1rem; /<em> 避免两段文字紧贴时出现视觉卡顿 </em>/
}
@keyframes scroll {
0% { transform: translateX(100%); }
100% { transform: translateX(-100%); }
}
</style>注意点：
立即学习“前端免费学习笔记（深入）”；
-
translateX(100%)表示从右侧完全进入，translateX(-100%)表示向左完全移出，这样滚动长度≈容器宽度×2，能撑满整个动画周期 - 动画时长（如
20s）越小滚动越快；若文字多、容器窄，需调大时长避免过快看不清 - 必须设
white-space: nowrap防止换行破坏滚动逻辑 - 移动端要注意
transform触发硬件加速，但低端 Android 可能仍有轻微掉帧
JavaScript 方案适合需要动态控制的场景
当你要点击暂停、鼠标悬停暂停、或实时更新滚动内容时，CSS 动画就力不从心了。用 requestAnimationFrame 手动控制位移更灵活，也更容易调试。
最小可用示例（仅滚动逻辑）：
<div id="js-marquee" style="white-space:nowrap;overflow:hidden;width:100%;">
<span>招聘中：React 工程师、Python 开发、DevOps 工程师</span>
</div>
<p><script>
const el = document.getElementById('js-marquee');
const text = el.querySelector('span');
const width = el.offsetWidth;
let offset = width;</p><p>function animate() {
offset -= 0.5; // 每帧移动 0.5px，可调速
if (offset <= -text.offsetWidth) offset = width;
text.style.transform = <code>translateX(${offset}px)</code>;
requestAnimationFrame(animate);
}
animate();
</script>实用增强建议：
- 监听
mouseenter/mouseleave暂停/恢复动画，避免用户阅读时文字乱跑 - 用
getBoundingClientRect()替代offsetWidth更准确获取渲染后尺寸，尤其含 padding 或缩放时 - 避免在
scroll或resize里频繁重置动画状态，容易引发重排和卡顿
兼容性与性能容易被忽略的细节
真正上线时，三个问题最常导致翻车：
- 文字内容动态加载后，CSS 动画不会自动重新计算宽度，需手动触发重绘（比如给容器加个
visibility: hidden → visible切换）或用 JS 重设animation属性 - 某些安卓 WebView（尤其旧版 UC、QQ 内置浏览器）对
transform: translateX支持不稳定，可降级为left+position: relative，但性能差很多 - 滚动区域如果嵌套在
transform或perspective容器里，可能被裁剪——检查父级是否设置了overflow: hidden或clip-path
别只盯着“能不能动”，先确认“在目标设备上动得稳不稳、停不停得住、换不换得及时”。
