Tabbed Logo Testimonial
介绍
居中标题下一张证言卡：顶部一排虚构品牌标签，当前项下方橙色进度条走完即自动切到下一家；正文大号引言后半句橙色高亮，配署名与立体小物插图；卡片下方灰色字标缓慢横向滚动，悬停暂停。
拆自整页模板 燧云 全球网络平台首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Tabbed Logo Testimonial 加进你的项目并换成你的配色。
适用场景
标题动效、客户证言、强调文案和大字排版。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add suiyun-tab-quote
mcp › 使用 8pt MCP 调用 get_component("suiyun-tab-quote")
代码
Tabbed Logo Testimonial 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-ltq"><h2>被认真做事的团队信赖</h2><p class="x-ltq__sub">他们把基础设施交给了我们。</p><div class="x-ltq__card"><div class="x-ltq__tabs" role="tablist"><button type="button" class="x-ltq__tab is-on" data-i="0"><i style="background:#4C9A54"></i>栗市<span class="x-ltq__bar"></span></button><button type="button" class="x-ltq__tab" data-i="1"><i style="background:#8E62E0"></i>回声<span class="x-ltq__bar"></span></button><button type="button" class="x-ltq__tab" data-i="2"><i style="background:#3B8DE6"></i>匣递<span class="x-ltq__bar"></span></button><span class="x-ltq__tab x-ltq__tab--mute"><i></i>青苔</span><span class="x-ltq__tab x-ltq__tab--mute"><i></i>云笺</span><span class="x-ltq__tab x-ltq__tab--mute"><i></i>拾贝</span></div><div class="x-ltq__slides"><figure class="x-ltq__slide is-on"><blockquote>“对我们来说，难点从来不是能用多少种复杂技术，<em>而是反过来——燧云帮我们用最简单的办法，做成非常复杂的事。</em>”</blockquote><figcaption><b>林一舟</b>开发效率负责人 · 栗市</figcaption><img src="https://8pt.dev/api/media/23d8db7580fa6e89b75aa9e0.webp" alt=""></figure><figure class="x-ltq__slide"><blockquote>“客服对话一旦卡顿，用户就走了。<em>切到燧云之后，我们终于不用半夜盯着流量曲线了。</em>”</blockquote><figcaption><b>周可</b>平台工程主管 · 回声</figcaption><img src="https://8pt.dev/api/media/a259b87b56ff1c362ac60aa2.webp" alt=""></figure><figure class="x-ltq__slide"><blockquote>“我们的仓配系统要在每个城市都跑得一样快，<em>燧云让这件事从工程难题变成了一行配置。</em>”</blockquote><figcaption><b>许南</b>技术合伙人 · 匣递</figcaption><img src="https://8pt.dev/api/media/6ef20516418938f0f575a948.webp" alt=""></figure></div></div><p class="x-ltq__more">还有更多团队……</p><div class="x-ltq__marq" aria-hidden="true"><div class="x-ltq__track"><span>青苔</span><span>云笺</span><span>拾贝</span><span>山屿</span><span>白鹭</span><span>半岛</span><span>木纹</span><span>潮汐</span><span>北窗</span><span>雾灯</span><span>青苔</span><span>云笺</span><span>拾贝</span><span>山屿</span><span>白鹭</span><span>半岛</span><span>木纹</span><span>潮汐</span><span>北窗</span><span>雾灯</span></div></div></div>
@import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap");.x-ltq{width:100%;max-width:1200px;margin:0 auto;box-sizing:border-box;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;color:#262626;text-align:center}.x-ltq h2{margin:0;font-size:clamp(30px,3.1vw,44px);font-weight:400;letter-spacing:-.015em}.x-ltq__sub{margin:14px 0 30px;font-size:16px;color:#666}.x-ltq__card{width:82%;margin:0 auto;border:1px solid #EBEBEB;background:#fff;text-align:left}.x-ltq__tabs{display:flex;border-bottom:1px solid #EBEBEB;overflow:hidden}.x-ltq__tab{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;flex:1;height:52px;border:0;border-right:1px solid #F2F2F2;background:none;font:inherit;font-size:14px;color:#777;cursor:pointer;transition:color .25s,background .25s}.x-ltq__tab i{width:12px;height:12px;border-radius:4px;background:#cfcfcf}.x-ltq__tab.is-on{color:#1d1d1d;background:#FFFBF6}.x-ltq__tab--mute{cursor:default;opacity:.55}.x-ltq__bar{position:absolute;left:0;bottom:-1px;height:2px;width:0;background:#FF5D1D}.x-ltq__tab.is-on .x-ltq__bar{animation:x-ltq-prog 6s linear forwards}.x-ltq__card:hover .x-ltq__tab.is-on .x-ltq__bar{animation-play-state:paused}.x-ltq__slides{position:relative;height:300px}.x-ltq__slide{position:absolute;inset:0;display:grid;grid-template-columns:1fr 190px;grid-template-rows:1fr auto;gap:10px 40px;margin:0;padding:40px 56px;box-sizing:border-box;opacity:0;transform:translateY(10px);transition:opacity .5s,transform .5s;pointer-events:none}.x-ltq__slide.is-on{opacity:1;transform:none;pointer-events:auto}.x-ltq__slide blockquote{margin:0;align-self:center;font-size:clamp(20px,2vw,27px);line-height:1.38;letter-spacing:-.01em}.x-ltq__slide em{font-style:normal;color:#FF5D1D}.x-ltq__slide figcaption{grid-column:1;font-size:13.5px;color:#666}.x-ltq__slide figcaption b{margin-right:8px;color:#262626;font-weight:500}.x-ltq__slide img{grid-column:2;grid-row:1/3;align-self:center;width:190px;height:190px;border-radius:16px;object-fit:cover;animation:x-ltq-float 6s ease-in-out infinite}.x-ltq__more{margin:34px 0 18px;font-size:14.5px;color:#666}.x-ltq__marq{width:82%;margin:0 auto;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}.x-ltq__track{display:flex;width:max-content;animation:x-ltq-marq 30s linear infinite}.x-ltq__marq:hover .x-ltq__track{animation-play-state:paused}.x-ltq__track span{padding:0 34px;font-size:24px;font-weight:700;letter-spacing:.12em;color:#3a3a3a;white-space:nowrap}.x-ltq__track span:nth-child(3n){font-weight:400;letter-spacing:.3em}.x-ltq__track span:nth-child(4n){color:#777}@keyframes x-ltq-prog{to{width:100%}}@keyframes x-ltq-marq{to{transform:translateX(-50%)}}@keyframes x-ltq-float{50%{transform:translateY(-8px)}}@media (max-width:640px){.x-ltq__card,.x-ltq__marq{width:100%}.x-ltq__tab--mute{display:none}.x-ltq__slides{height:430px}.x-ltq__slide{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:26px 22px}.x-ltq__slide img{grid-column:1;grid-row:1;width:110px;height:110px}.x-ltq__slide blockquote{font-size:20px}}@media (prefers-reduced-motion:reduce){.x-ltq__track,.x-ltq__slide img,.x-ltq__tab.is-on .x-ltq__bar{animation:none}.x-ltq__tab.is-on .x-ltq__bar{width:100%}.x-ltq__slide{transition:none}}(root) => {
const box = root.classList && root.classList.contains("x-ltq") ? root : root.querySelector(".x-ltq");
if (!box) return;
const tabs = [...box.querySelectorAll("button.x-ltq__tab")];
const slides = [...box.querySelectorAll(".x-ltq__slide")];
const pick = (i) => { tabs.forEach((t, k) => { t.classList.toggle("is-on", k === i); t.setAttribute("aria-selected", k === i ? "true" : "false"); }); slides.forEach((s, k) => s.classList.toggle("is-on", k === i)); };
const offs = tabs.map((t, i) => { const h = () => pick(i); t.addEventListener("click", h); return () => t.removeEventListener("click", h); });
const next = (e) => { if (e.animationName && e.animationName.indexOf("x-ltq-prog") > -1) { const i = tabs.findIndex((t) => t.classList.contains("is-on")); pick((i + 1) % tabs.length); } };
box.addEventListener("animationend", next);
return () => { offs.forEach((f) => f()); box.removeEventListener("animationend", next); };
}订阅 Builder 查看完整源码。查看价格