动画 · 注意力引导 · 16

跑马灯

跑马灯 = 一段文字或 Logo 沿水平方向持续循环滚动，用来呈现氛围性的低优先级信息。

New · Sale · Live now ·

尊重 prefers-reduced-motion：动画关闭，仅保留终态。

怎么向 AI 描述它

Build a marquee: duplicate the text and translateX from 0 to -100% on a linear loop, transform only.

Slow it to 12s and add a fade mask at both edges so items enter and leave softly.

Make the marquee pause on hover and on focus-within, respect prefers-reduced-motion by rendering a static truncated line, and expose --marquee-speed so the cadence is themeable. Duplicate content via two copies in one track.

修改类 Prompt 只动目标，不碰页面其余部分。

跑马灯是什么？

跑马灯让一段文字或 Logo 在屏幕上无尽循环横移。它是氛围性的、不紧急——状态行、公告、合作方 Logo。关键是「无缝」：复制一份内容让循环看不出接缝，并在悬停时暂停以便阅读。

动画标本

触发: mount
技术: css
时长: 6s
缓动: linear
性能: transform

什么时候用

Status lines, announcements, breaking updates
Partner / logo strips on landing pages

什么时候别用

Any content that must be read in full (use a list)
Above the fold as the primary message

Always duplicate the content — a single copy always shows a jump at the loop seam.

获取代码

.anim-el {
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}
:root { --anim-accent: #6d5efc; }

.marquee {
  overflow: hidden;
  white-space: nowrap;
  width: min(240px, 100%);
  border-radius: 10px;
  padding: 12px 0;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e6e7ec);
  animation-name: marquee;
  animation-duration: var(--anim-duration, 6s);
  animation-timing-function: var(--anim-easing, linear);
}
.marquee span {
  display: inline-block;
  padding-left: 100%;
  font: 600 14px/1 'IBM Plex Mono', monospace;
  color: var(--ink, #1a1c22);
}
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

<div class="marquee anim-el"><span>New · Sale · Live now · </span></div>

复制后即可用于你的项目。动效仅作用于 transform / opacity；颜色取自 --anim-accent。

另见

主题

AI SaaS 落地页→

组件

徽章→

跑马灯

跑马灯是什么？

动画标本

什么时候用

什么时候别用

另见

组件

动画

风格

主题

Prompt

术语

反模式

跑马灯

跑马灯是什么？

动画 标本

什么时候用

什么时候别用

另见

动画标本