页面顶部要放一条通知，三条消息轮流播。第一反应是找插件，其实几十行样式就够，还不占脚本。

思路很简单：外层限定宽度并隐藏溢出，内层放一份内容，让它沿水平方向匀速平移，走到末尾再从头开始。

关键在于内容要复制一份

如果只有一份文字，滚到边缘就会露出空白。做法是把同一段内容写两遍，第一份滚出视口的瞬间，第二份刚好接上。位移距离等于一份内容的宽度，动画才能无缝循环。

内容宽度算不准时，别去量像素。让动画从起点走到负的百分之五十，刚好是一份的长度，省掉一段计算。

核心几行大概是这样

.track{display:flex;white-space:nowrap;animation:run 12s linear infinite;} @keyframes run{from{transform:translateX(0)}to{transform:translateX(-50%)}}

外面那层容器加 overflow:hidden，宽度随父级走。鼠标悬停时可以暂停动画，让人把内容看完。

几个容易踩的坑

  • 容器没设溢出隐藏，文字铺到页面外，出现横向滚动条；
  • 行内元素没法直接位移，得改成块级或者行内块；
  • 文字里混着英文和数字时，两份宽度不一致，接缝处会错位；
  • 动画改 left 会掉帧，改 transform 才走合成层。

第三条最麻烦，一般靠给每份内容同样的内边距来对齐，或者干脆把两份放进同一个循环节点里。

写完记得在窄屏上拉一遍。手机宽度下文字常被挤成两行，接缝处一下就露出来了，桌面上看不出来。

无障碍和性能

系统开了减少动态效果的偏好时，滚动动画应该停掉，改成静态展示或者手动翻页。这不是可选项，晕动症的人看到持续横向移动的文字会明显不舒服。

性能上，一个页面放一条就够。多条同时滚，低配设备上肉眼可见地卡，手机更明显。

我的取舍：通知、公告这种短句用样式滚动可以，正文和商品标题别滚。用户读不完就被带走，看起来动感，实际是在降低停留。短句也要控字数，一条超过一屏半，滚得再顺也没人看到尾。