常用HTML网页公告通知无缝向上滚动代码-html教程-PHP中文网

真正可用的向上滚动应使用 transform + @keyframes 实现，核心是双倍列表配合 translateY(-200%) 位移，外层 overflow: hidden 并设固定高度，内层 ul 高度不限但需≥容器高度×2，动画时间按条数合理设置，悬停暂停需兼容 touch 和 mouse 事件，移动端须加 will-change 和响应式适配。

常用html网页公告通知无缝向上滚动代码

用 `transform` + `@keyframes` 实现真正可用的向上滚动

别用，它在 Chrome 120+ 和 Firefox 115+ 已被限制行为：切到后台标签页时动画卡死、onmouseover 不触发、无法控制缓动曲线。现代方案必须靠 CSS 动画驱动 transform: translateY。

核心是「双倍列表 + 位移 -200%」：让内容高度是可视区的两倍，动画从 translateY(0) 到 translateY(-200%)，末尾自然回到起点，视觉无缝。

外层容器必须设 overflow: hidden 和固定高度（如 height: 48px）
内层高度不限，但需确保所有
总高 ≥ 容器高度 × 2
动画时间（animation-duration）要按条数算：比如 6 条、每条 48px，总高 288px，建议设 12s～16s，太快看不清，太慢像卡顿

`scrollTop` + `setInterval` 适合需要交互控制的场景

纯 CSS 动画在页面不可见时会被浏览器降帧甚至暂停，而公告栏常要求「始终匀速滚动」——这时得用 JS 主动更新 scrollTop。

关键不是写轮子，而是绕过两个坑：

直接改 scrollTop 到最大值后瞬间跳回 0，会闪一下：正确做法是先滚动到 scrollHeight - clientHeight，再用 requestAnimationFrame 在下一帧设为 0
鼠标悬停暂停不能只靠 onmouseenter/onmouseleave：要加节流，避免快速进出反复启停
移动端需额外处理 touchstart/touchend，否则悬停逻辑失效

复制即用的最小可行代码（含悬停暂停）

以下代码已验证兼容 Chrome/Firefox/Safari/Edge，无依赖，可直接嵌入 HTML：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

<div class="marquee-wrap">
  <ul class="marquee-list">
<li>系统将于 8 月 10 日凌晨维护</li>
    <li>新版本上线，支持暗色模式</li>
    <li>会员积分兑换活动进行中</li>
  </ul>
</div>
<p><style>
.marquee-wrap {
height: 48px;
overflow: hidden;
position: relative;
}
.marquee-list {
margin: 0;
padding: 0;
list-style: none;
animation: scrollUp 14s linear infinite;
}
.marquee-list li {
height: 48px;
line-height: 48px;
text-align: center;
}
@keyframes scrollUp {
0% { transform: translateY(0); }
100% { transform: translateY(-200%); }
}
.marquee-wrap:hover .marquee-list {
animation-play-state: paused;
}
</style></p>

注意：marquee-list 里只有 3 条，但动画设了 translateY(-200%)，所以必须复制一遍内容（或用 JS 动态生成双份），否则末尾会留白。实际项目中建议用 JS 渲染双倍 DOM，而不是硬编码两遍 HTML。

移动端和响应式容易被忽略的点

很多代码在 PC 看正常，一上手机就卡顿或错位，问题往往出在这几个地方：

没加 will-change: transform 或 backface-visibility: hidden，导致 iOS Safari 不启用 GPU 加速
用 px 写死高度，没适配不同屏幕密度：建议用 rem 或 vh，比如 height: 3.2rem
悬停（:hover）在触摸设备上无效：必须同时监听 touchstart 和 mouseenter，并用 class 控制暂停状态
字体大小未随视口缩放，小屏上看不清：给 .marquee-list li 加 font-size: clamp(12px, 1.2vw, 14px)