OmniMotion
返回组件库

列表流动

复刻来源lusion.co
React · Vue3列表滚动ReactVue3CSS 原生

列表行上下缓动往返，遮罩让两端自然淡出。

业务项目无源码 → 我们复刻实现，自动适配 React，复制代码拿去即可使用。

下载 React 代码下载 Vue3 代码
下载 ZIP（含 React + Vue3）
演示预览实时时长 1x
Linear · Issue #1042 状态流转为 Done
12s agoCompleted
Stripe · 收到来自欧美的即时支付回调
34s agoVerified
Lusion · WebGL 空间深度粒子着色器编译完成
1m agoRendered
Apple · 物理弹簧阻尼微动效优化到 180ms
2m agoOptimized
Vercel · 边缘集群自动化冷启动预热
3m agoSuccess
播放速度已适配 prefers-reduced-motion
Marquee.jsx
/**
 * OmniMotion — 列表流动 / Marquee (React 18+ · 纯 CSS 版本)
 * 复刻来源: lusion.co — 列表上下缓动往返
 * 用法: <Marquee rows={3} speed={6} />
 */
export default function Marquee({ rows = 3, speed = 6 }) {
  return (
    <span className="mk-marquee">
      <span className="mk-marquee__track" style={{ animationDuration: speed + "s" }}>
        {Array.from({ length: rows }).map((_, i) => (
          <span key={i} className="mk-marquee__row">
            <span className="mk-marquee__dot" />
            <span className={"mk-marquee__line" + (i % 2 ? " mk-marquee__line--short" : "")} />
          </span>
        ))}
      </span>
    </span>
  );
}

/* 样式（可直接放入全局 CSS）
.mk-marquee {
  position: relative; display: block; width: 172px; height: 108px; overflow: hidden;
  border-radius: 4px; border: 1px solid var(--mk-stage-line); background: var(--mk-stage-surface);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 16%, #000 84%, transparent);
}
.mk-marquee__track { position: absolute; left: 0; right: 0; top: 50%;
  display: flex; flex-direction: column; gap: 8px;
  animation: mk-marquee 6s cubic-bezier(0.2, 0.8, 0.2, 1) infinite; }
.mk-marquee__row { display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  border-radius: 4px; background: var(--mk-stage-raised); }
.mk-marquee__dot { flex: none; width: 8px; height: 8px; border-radius: 999px; background: var(--mk-primary-quiet); }
.mk-marquee__line { flex: 1 1 auto; height: 6px; border-radius: 999px; background: #3a423d; }
.mk-marquee__line--short { flex: 0 0 auto; width: 34%; }
@keyframes mk-marquee {
  0% { transform: translateY(calc(-50% - 34px)); }
  50% { transform: translateY(calc(-50% + 34px)); }
  100% { transform: translateY(calc(-50% - 34px)); }
}
*/
属性 · Props
属性类型默认值说明
rowsnumber3可见行数量
speednumber6单轮时长（s）
<Marquee rows={3} speed={6} />