marquee标签通过scrollamount和scrolldelay属性控制滚动速度，但已废弃且兼容性差；推荐用CSS @keyframes实现平滑、全平台兼容的滚动动画，或用requestAnimationFrame+transform优化JS滚动性能。
用 marquee 标签改滚动速度最直接，但注意它已废弃
HTML5 不再支持 marquee 的语义化，但多数浏览器仍能渲染。若你模板里已有 <marquee>，改速度只需调整 scrollamount 和 scrolldelay 属性：
<marquee scrollamount="3" scrolldelay="80">公告内容</marquee>
scrollamount 控制每次移动像素数（越大越快），scrolldelay 是毫秒级延迟（越小越快）。常见组合：scrollamount="2" + scrolldelay="100" 较平缓；scrollamount="5" + scrolldelay="40" 明显加快。
⚠️ 注意：部分新版 Edge 或严格模式下可能失效；手机 Safari 完全不支持 marquee。
用 CSS @keyframes 实现兼容滚动更可靠
真正符合 HTML5 规范的做法是用 CSS 动画替代 marquee。关键在于控制 animation-duration 和使用 linear 时间函数：
立即学习“前端免费学习笔记（深入）”；
<div class="notice-scroll">
<span>【重要】系统将于今晚22:00维护</span>
<span>【通知】新版本已上线，欢迎体验</span>
</div>
<style>
.notice-scroll {
white-space: nowrap;
overflow: hidden;
width: 100%;
}
.notice-scroll span {
display: inline-block;
padding-left: 100%;
animation: scroll-left 20s linear infinite;
}
@keyframes scroll-left {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>
滚动速度由 animation-duration: 20s 决定——数值越小越快（如 10s 加倍速）；需确保 span 内容总宽度超过容器，否则动画无效果。
✅ 优势：全平台兼容，可响应式适配，支持暂停/鼠标悬停暂停（加 animation-play-state: paused）。
JavaScript 控制滚动时避免卡顿和重绘问题
若公告栏需动态加载或交互控制（如点击暂停、后端推送新条目），用 JS 更灵活，但容易出性能问题：
- 别用
setInterval频繁修改left值——触发强制同步布局，导致掉帧 - 优先用
requestAnimationFrame+transform: translateX() - 确保滚动容器设
will-change: transform或transform: translateZ(0)启用 GPU 加速
简单示例（每帧位移 0.5px，等效于中速滚动）：
const el = document.querySelector('.notice-scroll');
let pos = 0;
function animate() {
pos -= 0.5;
el.style.transform = `translateX(${pos}px)`;
if (pos <= -el.scrollWidth / 2) pos = 0;
requestAnimationFrame(animate);
}
animate();
移动端适配时滚动速度要单独调低
手机屏幕窄、手指易误触，相同像素速度在移动端会显得更快、更晃眼。建议：
- 用媒体查询区分设备：
@media (max-width: 768px) { .notice-scroll span { animation-duration: 35s; } } - 禁用移动端自动滚动（尤其 iOS Safari），加
touch-action: none防止手势冲突 - 若用户手动滑动过公告区域，应暂停自动滚动（监听
touchstart并临时清除动画）
滚动不是越快越好，慢一点反而更易读。很多模板默认值偏快，实际发布前最好在真机上试跑 3 分钟以上——眼睛疲劳感就是速度是否合理的直接反馈。
