Typing Search Marquee
介绍
左对齐的问题式标题与灰色长段落，下方搜索词逐字打出又删除、轮换展示，底部是一条缓慢横向滚动的界面长廊，手机与网页截图卡片交替，悬停暂停。
拆自整页模板 版拾 设计参考库官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Typing Search Marquee 加进你的项目并换成你的配色。
适用场景
滚动、悬停与入场动效，给页面增加节奏感；动效只用 transform 和 opacity。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add typing-search-marquee
mcp › 使用 8pt MCP 调用 get_component("typing-search-marquee")
代码
Typing Search Marquee 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-bts"><section class="bs-sm"><div class="bs-wrap"> <h2 class="bs-sm__h">设计调研，曾经要花半天。<br>现在，搜一下就够了。</h2> <p class="bs-sm__p">每位设计师都有那样一个文件夹：<br>存了几百张截图，<br>需要时偏偏找不到那一张。</p> <div class="bs-sm__q"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10.5" cy="11.5" r="6"/><path d="m20 21-5.2-5.2M18 2.5v4M16 4.5h4"/></svg><span class="bs-sm__typed" data-q='顺手的新手引导|让人想升级的付费页|清爽的空状态|一眼看懂的数据看板'>顺手的新手引导</span><i class="bs-sm__caret"></i></div> </div> <div class="bs-sm__view"><div class="bs-sm__track"><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:#ffffff"><svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="7" fill="#f97316" stroke="none"/><path d="M9 11c1 1 2 1 3 0M13 11c1 1 2 1 3 0" stroke="#7c2d12"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar s"></div><div class="bs-ph__hero" style="background:#f9731622"><span style="width:58%;aspect-ratio:1;border-radius:50%;background:#f97316;display:block"></span></div><div class="bs-ph__bar d m"></div><div class="bs-ph__bar"></div><div class="bs-ph__bar s"></div><div class="bs-ph__btn"></div></div></div></div><div class="bs-sm__c bs-sm__c--site"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#18181b,#e11d48)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18M3 12h18M6 6l12 12M18 6 6 18"/></svg></span><div class="bs-sm__in"><div class="bs-site bs-site--float" aria-hidden="true"><div class="bs-site__nav"><i></i><i style="width:30%"></i><i></i></div><b style="left:8%;top:20%;background:#fbbf24;transform:rotate(-8deg)"></b><b style="left:80%;top:14%;background:#60a5fa;transform:rotate(6deg)"></b><b style="left:16%;top:66%;background:#f472b6;transform:rotate(5deg)"></b><b style="left:74%;top:62%;background:#34d399;transform:rotate(-6deg)"></b><b style="left:44%;top:12%;background:#a78bfa;transform:rotate(3deg)"></b><b style="left:88%;top:40%;background:#fb923c;transform:rotate(-4deg)"></b><b style="left:4%;top:44%;background:#22d3ee;transform:rotate(8deg)"></b><b style="left:56%;top:74%;background:#f87171;transform:rotate(-3deg)"></b><div class="bs-site__t">每场好活动<br><em>从这里开场</em></div></div></div></div><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#c084fc,#7c3aed)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="2.5"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__hero" style="flex:0 0 32%;background:linear-gradient(160deg,#7c3aed,#111)"></div><div class="bs-ph__bar d m"></div><div class="bs-ph__plan on"><div class="bs-ph__bar d s"></div><div class="bs-ph__bar m"></div></div><div class="bs-ph__plan"><div class="bs-ph__bar d s"></div><div class="bs-ph__bar m"></div></div><div class="bs-ph__btn" style="background:#7c3aed"></div></div></div></div><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#27272a,#09090b)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v11H9l-5 4z"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar d s"></div><div class="bs-ph__bub">你好，想从哪里开始？</div><div class="bs-ph__bub me">先看看新手引导</div><div class="bs-ph__bub">好的，帮你挑了几种做法</div><div class="bs-ph__bub me">第二种不错</div><div class="bs-ph__bar" style="height:20px;border-radius:999px;margin-top:auto"></div></div></div></div><div class="bs-sm__c bs-sm__c--site"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#3b82f6,#1d4ed8)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z M4 7.5l8 4.5 8-4.5 M12 12v9"/></svg></span><div class="bs-sm__in"><div class="bs-site bs-site--wave" aria-hidden="true"><div class="bs-site__nav"><i></i><i style="width:30%"></i><i></i></div><svg viewBox="0 0 160 100" preserveAspectRatio="none"><path d="M10 80C40 20 70 90 100 30S150 10 160 40" fill="none" stroke="#8b5cf6" stroke-width="6" opacity=".7"/><path d="M0 60C30 40 60 100 95 50S140 20 160 70" fill="none" stroke="#c4b5fd" stroke-width="2" opacity=".6"/></svg><div class="bs-site__t">我们只做界面</div></div></div></div><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#4ade80,#16a34a)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19C5 10 11 5 19 5c0 8-5 14-14 14z M5 19l8-8"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar d s"></div><div class="bs-ph__bar m" style="height:14px;background:#111"></div><div class="bs-ph__bars"><i style="height:40%;background:#111"></i><i style="height:65%;background:#111"></i><i style="height:50%;background:#111"></i><i style="height:85%;background:#111"></i><i style="height:60%;background:#111"></i><i style="height:95%;background:#16a34a"></i><i style="height:70%;background:#111"></i></div><div class="bs-ph__row"><b style="background:#e0e7ff"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#fee2e2"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i></span></div></div></div></div><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#38bdf8,#0284c7)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 14c3-4 6-4 9 0s6 4 9 0M3 9c3-4 6-4 9 0s6 4 9 0"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar d s"></div><div class="bs-ph__bar" style="height:20px;border-radius:8px"></div><div class="bs-ph__row"><b style="background:#fde68a"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#bfdbfe"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#fecdd3"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#bbf7d0"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#e9d5ff"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div></div></div></div><div class="bs-sm__c bs-sm__c--site"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#2dd4bf,#0f766e)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="3.5"/></svg></span><div class="bs-sm__in"><div class="bs-site bs-site--gal" aria-hidden="true"><div class="bs-site__nav"><i></i><i style="width:30%"></i><i></i></div><b style="left:6%;top:16%;background:#d6d3d1"></b><b style="left:20%;top:58%;background:#78716c"></b><b style="left:30%;top:12%;background:#a8a29e"></b><b style="left:68%;top:18%;background:#e7e5e4"></b><b style="left:82%;top:54%;background:#57534e"></b><b style="left:12%;top:74%;background:#c2410c"></b><b style="left:74%;top:76%;background:#1d4ed8"></b><b style="left:88%;top:22%;background:#b91c1c"></b><b style="left:40%;top:70%;background:#e5e5e5"></b><b style="left:56%;top:8%;background:#44403c"></b><div class="bs-site__t">灵感的落脚处</div><span class="bs-site__pill"></span></div></div></div><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:#ffffff"><svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="7" fill="#f97316" stroke="none"/><path d="M9 11c1 1 2 1 3 0M13 11c1 1 2 1 3 0" stroke="#7c2d12"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar s"></div><div class="bs-ph__hero" style="background:#f9731622"><span style="width:58%;aspect-ratio:1;border-radius:50%;background:#f97316;display:block"></span></div><div class="bs-ph__bar d m"></div><div class="bs-ph__bar"></div><div class="bs-ph__bar s"></div><div class="bs-ph__btn"></div></div></div></div><div class="bs-sm__c bs-sm__c--site"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#18181b,#e11d48)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18M3 12h18M6 6l12 12M18 6 6 18"/></svg></span><div class="bs-sm__in"><div class="bs-site bs-site--float" aria-hidden="true"><div class="bs-site__nav"><i></i><i style="width:30%"></i><i></i></div><b style="left:8%;top:20%;background:#fbbf24;transform:rotate(-8deg)"></b><b style="left:80%;top:14%;background:#60a5fa;transform:rotate(6deg)"></b><b style="left:16%;top:66%;background:#f472b6;transform:rotate(5deg)"></b><b style="left:74%;top:62%;background:#34d399;transform:rotate(-6deg)"></b><b style="left:44%;top:12%;background:#a78bfa;transform:rotate(3deg)"></b><b style="left:88%;top:40%;background:#fb923c;transform:rotate(-4deg)"></b><b style="left:4%;top:44%;background:#22d3ee;transform:rotate(8deg)"></b><b style="left:56%;top:74%;background:#f87171;transform:rotate(-3deg)"></b><div class="bs-site__t">每场好活动<br><em>从这里开场</em></div></div></div></div><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#c084fc,#7c3aed)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="7"/><circle cx="12" cy="12" r="2.5"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__hero" style="flex:0 0 32%;background:linear-gradient(160deg,#7c3aed,#111)"></div><div class="bs-ph__bar d m"></div><div class="bs-ph__plan on"><div class="bs-ph__bar d s"></div><div class="bs-ph__bar m"></div></div><div class="bs-ph__plan"><div class="bs-ph__bar d s"></div><div class="bs-ph__bar m"></div></div><div class="bs-ph__btn" style="background:#7c3aed"></div></div></div></div><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#27272a,#09090b)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v11H9l-5 4z"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar d s"></div><div class="bs-ph__bub">你好，想从哪里开始？</div><div class="bs-ph__bub me">先看看新手引导</div><div class="bs-ph__bub">好的，帮你挑了几种做法</div><div class="bs-ph__bub me">第二种不错</div><div class="bs-ph__bar" style="height:20px;border-radius:999px;margin-top:auto"></div></div></div></div><div class="bs-sm__c bs-sm__c--site"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#3b82f6,#1d4ed8)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 4.5v9L12 21l-8-4.5v-9z M4 7.5l8 4.5 8-4.5 M12 12v9"/></svg></span><div class="bs-sm__in"><div class="bs-site bs-site--wave" aria-hidden="true"><div class="bs-site__nav"><i></i><i style="width:30%"></i><i></i></div><svg viewBox="0 0 160 100" preserveAspectRatio="none"><path d="M10 80C40 20 70 90 100 30S150 10 160 40" fill="none" stroke="#8b5cf6" stroke-width="6" opacity=".7"/><path d="M0 60C30 40 60 100 95 50S140 20 160 70" fill="none" stroke="#c4b5fd" stroke-width="2" opacity=".6"/></svg><div class="bs-site__t">我们只做界面</div></div></div></div><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#4ade80,#16a34a)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M5 19C5 10 11 5 19 5c0 8-5 14-14 14z M5 19l8-8"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar d s"></div><div class="bs-ph__bar m" style="height:14px;background:#111"></div><div class="bs-ph__bars"><i style="height:40%;background:#111"></i><i style="height:65%;background:#111"></i><i style="height:50%;background:#111"></i><i style="height:85%;background:#111"></i><i style="height:60%;background:#111"></i><i style="height:95%;background:#16a34a"></i><i style="height:70%;background:#111"></i></div><div class="bs-ph__row"><b style="background:#e0e7ff"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#fee2e2"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i></span></div></div></div></div><div class="bs-sm__c bs-sm__c--ph"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#38bdf8,#0284c7)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 14c3-4 6-4 9 0s6 4 9 0M3 9c3-4 6-4 9 0s6 4 9 0"/></svg></span><div class="bs-sm__in"><div class="bs-ph" aria-hidden="true"><div class="bs-ph__sb"><span>9:41</span><span><i></i></span></div><div class="bs-ph__bar d s"></div><div class="bs-ph__bar" style="height:20px;border-radius:8px"></div><div class="bs-ph__row"><b style="background:#fde68a"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#bfdbfe"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#fecdd3"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#bbf7d0"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div><div class="bs-ph__row"><b style="background:#e9d5ff"></b><span><i class="bs-ph__bar m d" style="display:block;height:5px"></i><i class="bs-ph__bar s" style="display:block;height:5px"></i></span></div></div></div></div><div class="bs-sm__c bs-sm__c--site"><span class="bs-ic bs-sm__badge" style="width:40px;height:40px;background:linear-gradient(145deg,#2dd4bf,#0f766e)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="7" height="7" rx="1.5"/><rect x="13" y="4" width="7" height="7" rx="1.5"/><rect x="4" y="13" width="7" height="7" rx="1.5"/><rect x="13" y="13" width="7" height="7" rx="3.5"/></svg></span><div class="bs-sm__in"><div class="bs-site bs-site--gal" aria-hidden="true"><div class="bs-site__nav"><i></i><i style="width:30%"></i><i></i></div><b style="left:6%;top:16%;background:#d6d3d1"></b><b style="left:20%;top:58%;background:#78716c"></b><b style="left:30%;top:12%;background:#a8a29e"></b><b style="left:68%;top:18%;background:#e7e5e4"></b><b style="left:82%;top:54%;background:#57534e"></b><b style="left:12%;top:74%;background:#c2410c"></b><b style="left:74%;top:76%;background:#1d4ed8"></b><b style="left:88%;top:22%;background:#b91c1c"></b><b style="left:40%;top:70%;background:#e5e5e5"></b><b style="left:56%;top:8%;background:#44403c"></b><div class="bs-site__t">灵感的落脚处</div><span class="bs-site__pill"></span></div></div></div></div></div> </section></div>
.x-bts{--ink:#111113;--mut:#6b6b70;--soft:#f3f3f4;--line:#e7e7ea;--card:#fff;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;
--mono:ui-monospace,Menlo,Consolas,"DejaVu Sans Mono",monospace;--ease:cubic-bezier(.16,1,.3,1)}.x-bts *{box-sizing:border-box;margin:0;padding:0}.x-bts{width:100%;text-align:left;font-family:var(--sans);color:var(--ink);background:#fff;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}.x-bts a{color:inherit;text-decoration:none}.x-bts button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-bts .bs-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-bts .bs-h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.18;text-align:center}.x-bts .bs-btn{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;white-space:nowrap;transition:transform .2s var(--ease),background .2s}.x-bts .bs-btn:active{transform:translateY(1px) scale(.98)}.x-bts .bs-btn--dark{background:var(--ink);color:#fff}.x-bts .bs-btn--dark:hover{background:#2a2a2e}.x-bts .bs-btn--gray{background:#ececee;color:var(--ink)}.x-bts .bs-btn--gray:hover{background:#e2e2e5}.x-bts .bs-btn svg{width:16px;height:16px}.x-bts .bs-ic{position:relative;display:inline-grid;place-items:center;flex:none;border-radius:24%;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),0 6px 16px -8px rgba(0,0,0,.35);overflow:hidden}.x-bts .bs-ic svg{width:56%;height:56%}.x-bts .bs-ph{position:relative;width:100%;aspect-ratio:9/19.5;background:#fff;border-radius:22px;box-shadow:0 0 0 1px rgba(0,0,0,.07),0 18px 40px -24px rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column;padding:10px 12px;gap:8px;font-size:9px;color:#111}.x-bts .bs-ph__sb{display:flex;justify-content:space-between;font-weight:600;font-size:8px}.x-bts .bs-ph__sb i{display:inline-block;width:18px;height:6px;border-radius:2px;background:#111;margin-left:3px}.x-bts .bs-ph__bar{height:6px;border-radius:3px;background:#ececef}.x-bts .bs-ph__bar.s{width:45%}.x-bts .bs-ph__bar.m{width:70%}.x-bts .bs-ph__bar.d{background:#1a1a1e}.x-bts .bs-ph__hero{flex:1;border-radius:14px;display:grid;place-items:center}.x-bts .bs-ph__btn{height:22px;border-radius:999px;background:#111;margin-top:auto}.x-bts .bs-ph__row{display:flex;align-items:center;gap:7px;padding:6px 0;border-bottom:1px solid #f0f0f2}.x-bts .bs-ph__row b{width:20px;height:20px;border-radius:6px;flex:none}.x-bts .bs-ph__row span{flex:1;display:flex;flex-direction:column;gap:4px}.x-bts .bs-ph__plan{border:1.5px solid #ececef;border-radius:10px;padding:8px;display:flex;flex-direction:column;gap:5px}.x-bts .bs-ph__plan.on{border-color:#111}.x-bts .bs-ph__bub{max-width:78%;padding:6px 8px;border-radius:10px;background:#f1f1f3;font-size:8.5px;line-height:1.4}.x-bts .bs-ph__bub.me{align-self:flex-end;background:#2563eb;color:#fff}.x-bts .bs-ph__bars{flex:1;display:flex;align-items:flex-end;gap:5px;padding:8px 0}.x-bts .bs-ph__bars i{flex:1;border-radius:4px 4px 0 0;background:#111}.x-bts .bs-site{position:relative;width:100%;aspect-ratio:16/10;border-radius:6px;overflow:hidden;box-shadow:0 10px 30px -18px rgba(0,0,0,.5)}.x-bts .bs-site__nav{position:absolute;left:5%;right:5%;top:5%;display:flex;justify-content:space-between}.x-bts .bs-site__nav i{display:block;height:3px;width:14%;border-radius:2px;background:currentColor;opacity:.5}.x-bts .bs-site__t{position:absolute;left:0;right:0;text-align:center;font-weight:700;letter-spacing:-.02em;line-height:1.15}.x-bts .bs-site--wave{background:radial-gradient(120% 90% at 70% 30%,#3b1d8f,#0b0618 70%);color:#fff}.x-bts .bs-site--wave svg{position:absolute;inset:0;width:100%;height:100%}.x-bts .bs-site--wave .bs-site__t{bottom:16%;font-family:Georgia,"Noto Serif CJK SC",serif;font-weight:400;font-size:clamp(11px,1.5vw,17px)}.x-bts .bs-site--float{background:#fff;color:#111}.x-bts .bs-site--float .bs-site__t{top:38%;font-size:clamp(11px,1.5vw,17px)}.x-bts .bs-site--float .bs-site__t em{font-style:normal;color:#ec4899}.x-bts .bs-site--float b{position:absolute;width:11%;aspect-ratio:1;border-radius:4px;box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}.x-bts .bs-site--gal{background:#0e0e10;color:#fff}.x-bts .bs-site--gal b{position:absolute;width:9%;aspect-ratio:3/4;border-radius:2px}.x-bts .bs-site--gal .bs-site__t{top:40%;font-size:clamp(11px,1.5vw,17px)}.x-bts .bs-site--gal .bs-site__pill{position:absolute;left:50%;top:62%;width:16%;height:7%;margin-left:-8%;border-radius:99px;background:#fff}.x-bts .bs-sm{padding:110px 0 120px;overflow:hidden}.x-bts .bs-sm__h{font-size:clamp(26px,3vw,34px);font-weight:700;letter-spacing:-.03em;line-height:1.25}.x-bts .bs-sm__p{margin-top:40px;font-size:clamp(24px,3vw,34px);font-weight:600;letter-spacing:-.03em;line-height:1.3;color:#8a8a90}.x-bts .bs-sm__q{display:flex;align-items:center;gap:14px;margin-top:64px;font-size:clamp(22px,2.6vw,30px);font-weight:600;letter-spacing:-.02em;min-height:44px}.x-bts .bs-sm__q svg{width:30px;height:30px;flex:none}.x-bts .bs-sm__caret{width:2px;height:1.1em;background:#111;animation:xbtsBlink 1s steps(1) infinite}@keyframes xbtsBlink{50%{opacity:0}}.x-bts .bs-sm__view{margin-top:44px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}.x-bts .bs-sm__track{display:flex;gap:16px;width:max-content;animation:xbtsMarq 60s linear infinite;padding:14px 0}.x-bts .bs-sm__view:hover .bs-sm__track{animation-play-state:paused}@keyframes xbtsMarq{to{transform:translateX(-50%)}}.x-bts .bs-sm__c{position:relative;flex:none;height:420px;background:var(--soft);border-radius:28px;display:grid;place-items:center;padding:28px}.x-bts .bs-sm__c--ph{width:240px}.x-bts .bs-sm__c--site{width:420px}.x-bts .bs-sm__in{width:100%}.x-bts .bs-sm__c--ph .bs-sm__in{width:170px}.x-bts .bs-sm__badge{position:absolute;left:16px;top:16px;z-index:2}@media (max-width:720px){.x-bts .bs-sm{padding:72px 0 80px}.x-bts .bs-sm__c{height:320px;padding:20px;border-radius:22px}.x-bts .bs-sm__c--ph{width:190px}.x-bts .bs-sm__c--ph .bs-sm__in{width:130px}.x-bts .bs-sm__c--site{width:300px}}@media (prefers-reduced-motion:reduce){.x-bts .bs-sm__track{animation:none}.x-bts .bs-sm__caret{animation:none}}.x-bts .bs-sm__view{contain:inline-size}.x-bts .bs-sm{padding:56px 0}.x-bts .bs-sm__p{margin-top:24px}.x-bts .bs-sm__q{margin-top:36px}.x-bts .bs-sm__view{margin-top:28px}.x-bts .bs-sm__c{height:340px}.x-bts .bs-sm__c--ph{width:200px}.x-bts .bs-sm__c--ph .bs-sm__in{width:140px}.x-bts .bs-sm__c--site{width:360px}(root) => {
const el = (root.classList && root.classList.contains('x-bts')) ? root : (root.querySelector('.x-bts') || root);
const out = el.querySelector('.bs-sm__typed');
const qs = (out.getAttribute('data-q') || '').split('|');
const RM = window.matchMedia && matchMedia('(prefers-reduced-motion: reduce)').matches;
let qi = 0, ci = qs[0].length, del = true, tm = 0;
const step = () => {
const q = qs[qi];
if (del) { ci--; if (ci <= 0) { del = false; qi = (qi + 1) % qs.length; } }
else { ci++; if (ci >= qs[qi].length) { del = true; out.textContent = qs[qi]; tm = setTimeout(step, 2200); return; } }
…订阅 Builder 查看完整源码。查看价格