滚动容器必须设置固定宽高和overflow:hidden，通过父容器裁剪与子元素transform位移实现逐条居中滚动，关键在单行高度基准的translatey偏移计算和steps/linear缓动控制。
滚动容器必须设置固定宽高和 overflow: hidden
超链接在公告栏里滚动，本质是靠父容器裁剪 + 子元素位移实现的。如果外层 <div> 没设 <code>width 和 height，或者 overflow 不是 hidden，滚动条会露出来，或根本滚不起来。
常见错误：只加了 animation 却忘了限制容器可视区域。
- 容器需显式设置
width: 300px（或其他具体值），不能是fit-content或auto -
height必须大于单行文本高度，否则没滚动空间 -
overflow: hidden是强制裁剪的关键，漏掉就失效
用 @keyframes 实现居中对齐的位移逻辑
“滚动居中”不是指文字始终停在中间，而是让每条链接依次滑入视口中央、短暂停留、再滑出。这需要精确控制 transform: translateY() 的起止值。
假设容器高 60px，单行链接高 30px，那居中位置就是 translateY(-15px)（上移自身高度一半）。
- 动画总时长要覆盖“滑入→居中→滑出”，建议 ≥ 3s，否则太快看不清
- 关键帧里至少三个状态：
0%（完全上移出视口）、20%（进入居中）、80%（停留）、100%（完全下移出视口） - 避免用
top/bottom动画，性能差；优先用transform
链接内容需包裹在 inline-block 容器里才能逐条滚动
如果直接对多个 <a></a> 标签设动画，它们会重叠或错位。正确做法是把每条链接包进一个 <span></span> 或 <div>，并设 <code>display: inline-block 或 display: block，再整体用 white-space: nowrap 防换行。
<div class="marquee"> <span class="item"><a href="#">通知一</a></span> <span class="item"><a href="#">通知二</a></span> <span class="item"><a href="#">通知三</a></span> </div>
-
.item必须设display: inline-block，否则white-space: nowrap无效 - 所有
.item要放在同一行 HTML 中（无换行符/空格），否则会产生间隙 - 若用 Flex 布局替代，需配合
flex-direction: column和align-items: center控制居中，但动画逻辑更复杂
兼容性与性能注意点：will-change 和 animation-timing-function
滚动动画卡顿，大概率是浏览器没开启硬件加速，或缓动函数选错。IE 已淘汰，但 Safari 对 transform 的子像素渲染仍有小偏差。
- 给滚动容器加
will-change: transform，提前告知浏览器要动画 - 别用
ease-in-out——它会让链接在两端减速，导致居中停留时间不可控；改用steps(1, end)或线性linear更稳 - Safari 下若出现文字模糊，加
-webkit-font-smoothing: antialiased - 移动端记得加
touch-action: none，防止手势干扰滚动
translateY() 的偏移量。很多人直接写 -50%，结果发现只是垂直居中容器，不是每条链接依次居中——关键是要以单条内容高度为基准，而不是整个列表。
