Marquee
介绍
两行反向滚动的标签带，边缘渐隐，悬停暂停。内容复制一份实现无缝循环。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Marquee 加进你的项目并换成你的配色。
适用场景
滚动、悬停与入场动效，给页面增加节奏感；动效只用 transform 和 opacity。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add marquee
mcp › 使用 8pt MCP 调用 get_component("marquee")
代码
Marquee 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-mq">
<div class="x-mq__row"><div class="x-mq__track">
<span>Grid</span><span>Type</span><span>Motion</span><span>Token</span><span>Radius</span><span>Shadow</span><span>Layout</span><span>Color</span>
</div></div>
<div class="x-mq__row x-mq__row--rev"><div class="x-mq__track">
<span>间距</span><span>字号</span><span>行高</span><span>栅格</span><span>对比度</span><span>层级</span><span>节奏</span><span>留白</span>
</div></div>
</div>.x-mq{display:grid;gap:12px;width:100%}
.x-mq__row{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%)}
.x-mq__track{display:flex;gap:10px;width:max-content;animation:x-mq 22s linear infinite}
.x-mq__row--rev .x-mq__track{animation-direction:reverse;animation-duration:26s}
.x-mq:hover .x-mq__track{animation-play-state:paused}
.x-mq span{flex:none;padding:10px 18px;border-radius:12px;border:1px solid var(--d-line,rgba(255,255,255,.1));background:var(--d-card,#101016);color:var(--d-fg,#fff);font:600 14px/1 var(--d-font,system-ui,sans-serif)}
.x-mq__row--rev span{color:var(--d-muted,#a0a0ab)}
@keyframes x-mq{to{transform:translateX(calc(-50% - 5px))}}const init = (root) => {
root.querySelectorAll('.x-mq__track').forEach(t => t.innerHTML += t.innerHTML.replace(/<span>/g, '<span aria-hidden="true">'));
};订阅 Builder 查看完整源码。查看价格