Infra Tab Showcase
介绍
深色面板：左侧手风琴列表点开显示说明，右侧对应切换五种动态画面——发光浏览器与节点连线、服务图标网格、旋转线框地球与弧线、浮动徽章、笔记本与手机样机，自动轮播。
拆自整页模板 念成 AI 应用构建器首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Infra Tab Showcase 加进你的项目并换成你的配色。
适用场景
滚动、悬停与入场动效，给页面增加节奏感；动效只用 transform 和 opacity。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add infra-tab-showcase
mcp › 使用 8pt MCP 调用 get_component("infra-tab-showcase")
代码
Infra Tab Showcase 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<section class="x-bis"><div class="bis-l"><h2>为构建，也为之后</h2><p>念成运行在企业级基础设施上，你做出的全栈软件可以放心扩展。</p><div class="bis-list"><button type="button" class="bis-it on" data-i="0"><b>托管，交给我们</b><span>托管、证书和后端基础设施都由念成照看。代码和数据始终属于你。</span></button><button type="button" class="bis-it" data-i="1"><b>应用栈，一键连通</b><span>表格、邮件、数据库和常用服务，点几下就接进你的应用。</span></button><button type="button" class="bis-it" data-i="2"><b>收款，随时就绪</b><span>接入收款与订阅，从第一位用户开始就能收钱。</span></button><button type="button" class="bis-it" data-i="3"><b>安全，是默认配置</b><span>加密、权限隔离与操作审计开箱即用，不必另外配置。</span></button><button type="button" class="bis-it" data-i="4"><b>随时随地，都能用</b><span>网页、平板与手机自动适配，在哪儿打开都顺手。</span></button></div></div><div class="bis-r"><div class="bis-v on" data-i="0"><div class="bv bv-host"><span class="bh-glow"></span><svg class="bh-ln" viewBox="0 0 600 300" preserveAspectRatio="none"><path id="bhP" d="M70 165 C150 165 160 150 200 150 S 260 170 300 172 S 360 150 400 150 S 470 165 530 165" fill="none" stroke="rgba(255,255,255,.18)" stroke-width="1.2"/><circle r="3" fill="#fff"><animateMotion dur="5s" repeatCount="indefinite"><mpath href="#bhP"/></animateMotion></circle></svg><div class="bh-win"><div class="bh-bar"><i></i><i></i><i></i><span><svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg>orbit.example.com</span><b></b><b></b></div><div class="bh-body"></div></div><span class="bh-n n1"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg></span><span class="bh-n n2"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="5" r="2"/><circle cx="6" cy="19" r="2"/><circle cx="18" cy="8" r="2"/><path d="M6 7v10M18 10c0 4-6 3-11 7"/></svg></span><span class="bh-n n3 big"><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18h10a4 4 0 0 0 .5-8A6 6 0 0 0 6 9.5 4.3 4.3 0 0 0 7 18z"/></svg></span><span class="bh-n n4"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="15" r="4"/><path d="M11 12l8-8M16 7l2 2"/></svg></span><span class="bh-n n5"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="6" rx="7" ry="3"/><path d="M5 6v12c0 1.7 3 3 7 3s7-1.3 7-3V6M5 12c0 1.7 3 3 7 3s7-1.3 7-3"/></svg></span></div></div><div class="bis-v" data-i="1"><div class="bv bv-grid"><div class="ig-g"><span class="ig-t" style="--c:#1F9D55" data-n="表格"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M9 10v10"/></svg></span><span class="ig-t" style="--c:#E5484D" data-n="邮件"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg></span><span class="ig-t" style="--c:#635BFF" data-n="收款"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="13" rx="2"/><path d="M3 10h18"/></svg></span><span class="ig-t" style="--c:#3ECF8E" data-n="数据库"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="6" rx="7" ry="3"/><path d="M5 6v12c0 1.7 3 3 7 3s7-1.3 7-3V6M5 12c0 1.7 3 3 7 3s7-1.3 7-3"/></svg></span><span class="ig-t" style="--c:#7C66DC" data-n="群聊"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v11H9l-5 4z"/></svg></span><span class="ig-t" style="--c:#2F80ED" data-n="日历"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M9 3v4M15 3v4"/></svg></span><span class="ig-t" style="--c:#38BDF8" data-n="云盘"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M7 18h10a4 4 0 0 0 .5-8A6 6 0 0 0 6 9.5 4.3 4.3 0 0 0 7 18z"/></svg></span><span class="ig-t" style="--c:#F5A524" data-n="自动化"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13 3L5 14h6l-1 7 8-11h-6z"/></svg></span><span class="ig-t" style="--c:#F59E0B" data-n="文件"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h6l2 2h10v11H3z"/></svg></span><span class="ig-t" style="--c:#10B981" data-n="地图"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 4l6 2 6-2v14l-6 2-6-2-6 2V6z"/><path d="M9 4v14M15 6v14"/></svg></span><span class="ig-t" style="--c:#95BF47" data-n="店铺"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 4h2l2 11h11l2-8H6"/><circle cx="9" cy="19" r="1.4"/><circle cx="17" cy="19" r="1.4"/></svg></span><span class="ig-t" style="--c:#EF4444" data-n="通知"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 16V11a6 6 0 0 1 12 0v5l2 2H4z"/><path d="M10 20h4"/></svg></span><span class="ig-t" style="--c:#111827" data-n="文档"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 20l4-1 11-11-3-3L5 16z"/></svg></span><span class="ig-t" style="--c:#EC4899" data-n="音频"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l11-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="17" cy="16" r="3"/></svg></span><span class="ig-t" style="--c:#FF4D4F" data-n="视频"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="13" height="12" rx="2"/><path d="M16 10l5-3v10l-5-3"/></svg></span><span class="ig-t" style="--c:#8B5CF6" data-n="仓储"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7l9-4 9 4v10l-9 4-9-4z"/><path d="M3 7l9 4 9-4M12 11v10"/></svg></span><span class="ig-t" style="--c:#0EA5E9" data-n="分析"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19h16"/><path d="M6 15l4-5 3 3 5-7"/></svg></span><span class="ig-t ig-c"><span class="lg"><svg viewBox="0 0 32 32"><defs><linearGradient id="lgG" x1="0" y1="0" x2="1" y2="1"><stop offset="0" stop-color="#FF7A1A"/><stop offset=".5" stop-color="#FF3D8B"/><stop offset="1" stop-color="#7B61FF"/></linearGradient></defs><path d="M6 4h12a10 10 0 0 1 10 10v4a10 10 0 0 1-10 10H10a6 6 0 0 1-6-6V6a2 2 0 0 1 2-2z" fill="url(#lgG)"/><path d="M15.5 9l1.6 4.4 4.4 1.6-4.4 1.6-1.6 4.4-1.6-4.4-4.4-1.6 4.4-1.6z" fill="#fff"/></svg></span></span><span class="ig-t" style="--c:#2563EB" data-n="检索"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4-4"/></svg></span><span class="ig-t" style="--c:#D97757" data-n="智能体"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="8" width="14" height="11" rx="3"/><path d="M12 4v4M9 13h.01M15 13h.01"/></svg></span><span class="ig-t" style="--c:#24292F" data-n="代码库"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 8l-4 4 4 4M15 8l4 4-4 4"/></svg></span><span class="ig-t" style="--c:#64748B" data-n="登录"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="11" width="14" height="9" rx="2"/><path d="M8 11V8a4 4 0 0 1 8 0v3"/></svg></span><span class="ig-t" style="--c:#F43F5E" data-n="会员"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 20s-7-4.5-7-10a4 4 0 0 1 7-2.6A4 4 0 0 1 19 10c0 5.5-7 10-7 10z"/></svg></span><span class="ig-t" style="--c:#22C55E" data-n="短信"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="7" y="3" width="10" height="18" rx="2"/><path d="M11 18h2"/></svg></span><span class="ig-t" style="--c:#A855F7" data-n="生成"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v5M12 16v5M3 12h5M16 12h5M6 6l3 3M15 15l3 3M18 6l-3 3M9 15l-3 3"/></svg></span><span class="ig-t" style="--c:#0EA5E9" data-n="网络钩子"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="7" r="2.3"/><circle cx="18" cy="17" r="2.3"/><circle cx="18" cy="6" r="2.3"/><path d="M8.2 7.5l7.6-1M8 8.6l8.4 6.8"/></svg></span><span class="ig-t" style="--c:#3B82F6" data-n="域名"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M3 12h18M12 3c3 3 3 15 0 18M12 3c-3 3-3 15 0 18"/></svg></span><span class="ig-t" style="--c:#EAB308" data-n="密钥"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="15" r="4"/><path d="M11 12l8-8M16 7l2 2"/></svg></span><span class="ig-t" style="--c:#6366F1" data-n="设计稿"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l9 5-9 5-9-5z"/><path d="M3 13l9 5 9-5"/></svg></span><span class="ig-t" style="--c:#94A3B8" data-n="表单"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3h8l4 4v14H6z"/><path d="M14 3v4h4"/></svg></span><span class="ig-t" style="--c:#14B8A6" data-n="监控"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s4-7 10-7 10 7 10 7-4 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg></span><span class="ig-t" style="--c:#06B6D4" data-n="客服"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5h16v11H9l-5 4z"/></svg></span><span class="ig-t" style="--c:#F97316" data-n="预约"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="5" width="16" height="15" rx="2"/><path d="M4 10h16M9 3v4M15 3v4"/></svg></span><span class="ig-t" style="--c:#84CC16" data-n="报表"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 10h18M9 10v10"/></svg></span><span class="ig-t" style="--c:#A3A3A3" data-n="订阅"><svg viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg></span></div></div></div><div class="bis-v" data-i="2"><div class="bv bv-globe"><canvas class="glb" aria-hidden="true"></canvas><span class="bg-glow"></span></div></div><div class="bis-v" data-i="3"><div class="bv bv-badge"><i class="bb-l l1"></i><i class="bb-l l2"></i><i class="bb-l l3"></i><span class="bb b0"><b>加密</b><small>存储</small></span><span class="bb b1"><b>隔离</b><small>权限</small></span><span class="bb b2"><b>审计</b><small>日志</small></span><span class="bb b3"><b>备份</b><small>每日</small></span><span class="bg-glow"></span></div></div><div class="bis-v" data-i="4"><div class="bv bv-dev"><div class="bd-lap"><div class="bd-scr"><img src="https://8pt.dev/api/media/b3cefd20b35a4a148be85c86.webp" alt="" loading="lazy"></div><div class="bd-base"></div></div><div class="bd-ph"><div class="bd-ps"><img src="https://8pt.dev/api/media/28d90dbb2e5b1b652360ac32.webp" alt="" loading="lazy"></div></div><span class="bg-glow"></span></div></div></div></section>
.x-bis{--ink:#1C1C1A;--mut:#5F5F5B;--line:#E9E7E1;--cream:#FCFBF8;--card:#F5F4EF;--blue:#4C7DFF;--pink:#FF66CC;--red:#FF2E63;--org:#FF7A1A;font-family:"Inter","Noto Sans SC","PingFang SC","Microsoft YaHei",system-ui,sans-serif;-webkit-font-smoothing:antialiased;text-align:left;color:var(--ink)}.x-bis,.x-bis *{box-sizing:border-box}.x-bis a{color:inherit;text-decoration:none}.x-bis button{font:inherit;cursor:pointer;color:inherit}.x-bis img{display:block;max-width:100%}.x-bis .lg{display:inline-block;width:24px;height:24px;flex:none}.x-bis .lg svg{width:100%;height:100%;display:block}.x-bis .ig-g{display:grid;grid-template-columns:repeat(7,64px);gap:14px;justify-content:center;-webkit-mask-image:radial-gradient(closest-side,#000 45%,rgba(0,0,0,.35) 75%,transparent);mask-image:radial-gradient(closest-side,#000 45%,rgba(0,0,0,.35) 75%,transparent)}.x-bis .ig-t{position:relative;width:64px;height:64px;border-radius:16px;display:grid;place-items:center;color:var(--c);background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:transform .3s,background .3s,box-shadow .3s}.x-bis .ig-t:hover,.x-bis .ig-t.pulse{transform:translateY(-3px);background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),0 10px 30px -8px var(--c)}.x-bis .ig-t:hover::after{content:attr(data-n);position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;color:#ddd;background:#2a2a2a;padding:2px 8px;border-radius:6px;z-index:2}.x-bis .ig-c{background:linear-gradient(160deg,#FF8A3D,#FF3D8B 55%,#7B61FF);box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 0 50px -6px rgba(255,61,139,.8);transform:scale(1.12)}.x-bis .ig-c .lg{width:36px;height:36px}.x-bis .ig-c .lg path:first-child{fill:#fff}.x-bis .ig-c .lg path:last-child{fill:#FF3D8B}@media (max-width:640px){.x-bis .ig-g{grid-template-columns:repeat(7,40px);gap:8px}.x-bis .ig-t{width:40px;height:40px;border-radius:11px}.x-bis .ig-t svg{width:18px;height:18px}.x-bis .ig-c .lg{width:24px;height:24px}}.x-bis .bv{position:relative;height:100%;overflow:hidden;border-radius:14px;background:radial-gradient(90% 70% at 50% 40%,#25262B,#17181B);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}.x-bis .bg-glow{position:absolute;left:-10%;right:-10%;bottom:-38%;height:60%;border-radius:50%;background:radial-gradient(closest-side,#9FB7FF,#4C6FFF 40%,rgba(255,102,204,.5) 70%,transparent);filter:blur(20px);opacity:.85;pointer-events:none}.x-bis .bv-host{background:linear-gradient(180deg,#1E2230,#1A1B22)}.x-bis .bh-glow{position:absolute;left:30%;right:30%;top:30%;bottom:20%;background:radial-gradient(closest-side,rgba(255,61,139,.35),transparent);filter:blur(20px)}.x-bis .bh-ln{position:absolute;inset:0;width:100%;height:100%}.x-bis .bh-win{position:absolute;left:26%;right:26%;top:22%;bottom:18%;border-radius:16px;background:rgba(40,42,50,.75);box-shadow:0 0 0 1.5px #5B8CFF,0 0 0 3px rgba(255,61,139,.35),0 20px 50px -10px rgba(255,61,139,.55);padding:8px}.x-bis .bh-bar{display:flex;align-items:center;gap:5px;height:22px;color:#aaa;font-size:10px}.x-bis .bh-bar i{width:7px;height:7px;border-radius:50%;background:#555}.x-bis .bh-bar span{flex:1;margin:0 10px;display:flex;align-items:center;justify-content:center;gap:4px;height:18px;border-radius:6px;background:#3a3c44}.x-bis .bh-bar b{width:14px;height:14px;border-radius:50%;background:#3a3c44}.x-bis .bh-body{position:absolute;left:8px;right:8px;top:36px;bottom:8px;border-radius:10px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}.x-bis .bh-n{position:absolute;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;display:grid;place-items:center;color:#e6e6e6;background:radial-gradient(circle at 35% 30%,#5a5c66,#2b2c33);box-shadow:0 0 0 1px rgba(255,255,255,.12),0 6px 18px rgba(0,0,0,.4);animation:bisF 4s ease-in-out infinite}.x-bis .bh-n.big{width:52px;height:52px;margin:-14px 0 0 -26px}.x-bis .n1{left:12%}.x-bis .n2{left:33%}.x-bis .n3{left:50%}.x-bis .n4{left:67%}.x-bis .n5{left:88%}.x-bis .n2,.x-bis .n4{animation-delay:-1.5s}.x-bis .n3{animation-delay:-.8s}@keyframes bisF{50%{transform:translateY(-5px)}}.x-bis .bv-grid{display:grid;place-items:center;background:#1B1C1F}.x-bis .bv-globe{background:#18191C}.x-bis .glb{position:absolute;left:0;top:0;width:100%;height:100%}.x-bis .bv-badge{background:#1B1C1F}.x-bis .bb-l{position:absolute;top:0;bottom:0;border-left:1px dashed rgba(255,255,255,.12)}.x-bis .l1{left:30%}.x-bis .l2{left:50%}.x-bis .l3{left:70%}.x-bis .bb{position:absolute;width:86px;height:86px;margin:-43px 0 0 -43px;border-radius:50%;display:grid;place-content:center;text-align:center;color:#eee;background:radial-gradient(circle at 40% 30%,#4a4b52,#26272c);box-shadow:0 0 0 2px #2c2d33,0 0 0 3.5px rgba(255,79,163,.6),0 0 0 5px rgba(91,140,255,.5),0 12px 30px rgba(0,0,0,.5);z-index:1;animation:bisF 5s ease-in-out infinite}.x-bis .bb b{font-size:19px;font-weight:700;letter-spacing:.06em}.x-bis .bb small{font-size:10px;letter-spacing:.2em;color:#aaa;margin-top:2px}.x-bis .b0{left:50%;top:20%}.x-bis .b1{left:30%;top:42%;animation-delay:-1.2s}.x-bis .b2{left:70%;top:42%;animation-delay:-2.4s}.x-bis .b3{left:50%;top:64%;animation-delay:-3.6s}.x-bis .bv-dev{background:#1B1C1F}.x-bis .bd-lap{position:absolute;left:14%;width:56%;top:14%;z-index:1}.x-bis .bd-scr{aspect-ratio:16/10.4;border-radius:12px 12px 0 0;padding:8px;background:#2E2F35;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),0 0 0 1px rgba(91,140,255,.35)}.x-bis .bd-scr img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:5px;opacity:.85}.x-bis .bd-base{height:10px;margin:0 -8%;border-radius:0 0 10px 10px;background:linear-gradient(180deg,#45464d,#2a2b30);box-shadow:0 8px 24px rgba(91,140,255,.35)}.x-bis .bd-ph{position:absolute;left:62%;width:17%;top:27%;z-index:2;aspect-ratio:9/18;border-radius:18px;padding:6px;background:#2E2F35;box-shadow:0 0 0 1.5px #7B8CFF,0 0 0 3px rgba(255,79,163,.45),0 16px 40px rgba(255,79,163,.35)}.x-bis .bd-ps{width:100%;height:100%;border-radius:12px;overflow:hidden}.x-bis .bd-ps img{width:100%;height:100%;object-fit:cover}.x-bis{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:48px;width:100%;max-width:1360px;margin:0 auto;padding:56px 40px;background:#1C1C1C;color:#fff;border-radius:22px}.x-bis h2{margin:0 0 14px;font-size:clamp(26px,2.6vw,32px);font-weight:600;letter-spacing:-.03em;line-height:1.2}.x-bis .bis-l>p{margin:0 0 30px;font-size:15px;line-height:1.65;color:#BDBDB8}.x-bis .bis-it{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid rgba(255,255,255,.12);background:transparent;color:#fff;padding:14px 0}.x-bis .bis-it b{display:block;font-size:14px;font-weight:500}.x-bis .bis-it span{display:block;max-height:0;overflow:hidden;opacity:0;font-size:12.5px;line-height:1.6;color:#BDBDB8;transition:max-height .4s,opacity .4s,margin .4s}.x-bis .bis-it.on span{max-height:80px;opacity:1;margin-top:8px}.x-bis .bis-it:not(.on) b{color:#D6D6D1}.x-bis .bis-it:hover b{color:#fff}.x-bis .bis-r{position:relative;height:500px}.x-bis .bis-v{position:absolute;inset:0;opacity:0;transform:scale(.98);transition:opacity .6s,transform .6s;pointer-events:none}.x-bis .bis-v.on{opacity:1;transform:none;pointer-events:auto}.x-bis.is-stack .bis-l{position:sticky;top:96px;align-self:start}.x-bis.is-stack .bis-r{height:auto;display:grid;gap:12px}.x-bis.is-stack .bis-v{position:relative;inset:auto;height:500px;opacity:1;transform:none;pointer-events:auto}@media (max-width:900px){.x-bis{grid-template-columns:1fr;padding:40px 18px;gap:28px}.x-bis .bis-r,.x-bis.is-stack .bis-v{height:360px}.x-bis.is-stack .bis-l{position:static}}@media (prefers-reduced-motion:reduce){.x-bis *,.x-bis *::before,.x-bis *::after{animation:none!important;transition:none!important}}.x-bis{max-width:none;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.4px);background-size:16px 16px}.x-bis{width:1120px;max-width:100%;box-sizing:border-box}(root) => {const gridPulse=(g)=>{const ts=[...g.querySelectorAll('.ig-t:not(.ig-c)')];let k=0;const red=matchMedia('(prefers-reduced-motion: reduce)').matches;if(red)return ()=>{};const iv=setInterval(()=>{ts.forEach(t=>t.classList.remove('pulse'));const near=[9,10,11,16,18,23,24,25];const t=ts[near[k++%near.length]];if(t)t.classList.add('pulse')},1100);return ()=>clearInterval(iv)};const drawGlobe=(cv)=>{const ctx=cv.getContext('2d');const N=220,P=[],E=[];const ga=Math.PI*(3-Math.sqrt(5));for(let i=0;i<N;i++){const y=1-(i/(N-1))*2,r=Math.sqrt(1-y*y),t=ga*i;P.push([Math.cos(t)*r,y,Math.sin(t)*r])}
for(let i=0;i<N;i++)for(let j=i+1;j<N;j++){const dx=P[i][0]-P[j][0],dy=P[i][1]-P[j][1],dz=P[i][2]-P[j][2];if(dx*dx+dy*dy+dz*dz<0.058)E.push([i,j])}
const ll=(la,lo)=>{la*=Math.PI/180;lo*=Math.PI/180;return [Math.cos(la)*Math.cos(lo),Math.sin(la),Math.cos(la)*Math.sin(lo)]};const A=ll(28,-60),B=ll(-12,40);
let W=0,H=0,dpr=1,raf,a=0,prog=0;const red=matchMedia('(prefers-reduced-motion: reduce)').matches;
const fit=()=>{dpr=Math.min(2,devicePixelRatio||1);W=cv.clientWidth;H=cv.clientHeight;cv.width=W*dpr;cv.height=H*dpr};fit();const ro=new ResizeObserver(fit);ro.observe(cv);
const rot=(p)=>{const c=Math.cos(a),s=Math.sin(a),t=0.32,ct=Math.cos(t),st=Math.sin(t);let x=p[0]*c-p[2]*s,z=p[0]*s+p[2]*c,y=p[1];const y2=y*ct-z*st,z2=y*st+z*ct;return [x,y2,z2]};
const frame=()=>{ctx.setTransform(dpr,0,0,dpr,0,0);ctx.clearRect(0,0,W,H);const R=Math.min(W,H)*0.42,cx=W/2,cy=H/2;const Q=P.map(rot);
ctx.lineWidth=0.6;for(const [i,j] of E){const z=(Q[i][2]+Q[j][2])/2;ctx.strokeStyle='rgba(200,210,255,'+(0.05+0.22*(z+1)/2)+')';ctx.beginPath();ctx.moveTo(cx+Q[i][0]*R,cy-Q[i][1]*R);ctx.lineTo(cx+Q[j][0]*R,cy-Q[j][1]*R);ctx.stroke()}
for(const q of Q){const z=(q[2]+1)/2;ctx.fillStyle='rgba(255,255,255,'+(0.15+0.85*z)+')';ctx.beginPath();ctx.arc(cx+q[0]*R,cy-q[1]*R,0.6+1.4*z,0,7);ctx.fill()}
const a1=rot(A),b1=rot(B);const pts=[];for(let k=0;k<=40;k++){const t=k/40;let x=a1[0]*(1-t)+b1[0]*t,y=a1[1]*(1-t)+b1[1]*t,z=a1[2]*(1-t)+b1[2]*t;const l=Math.hypot(x,y,z)||1,h=1+0.25*Math.sin(Math.PI*t);pts.push([cx+x/l*h*R,cy-y/l*h*R])}
const n=Math.max(2,Math.min(41,Math.floor(prog*40)));const gr=ctx.createLinearGradient(pts[0][0],pts[0][1],pts[40][0],pts[40][1]);gr.addColorStop(0,'#FF4FA3');gr.addColorStop(1,'#5B8CFF');ctx.strokeStyle=gr;ctx.lineWidth=2.2;ctx.beginPath();ctx.moveTo(pts[0][0],pts[0][1]);for(let k=1;k<n;k++)ctx.lineTo(pts[k][0],pts[k][1]);ctx.stroke();
for(const [p,c] of [[pts[0],'#FF4FA3'],[pts[n-1],'#5B8CFF']]){ctx.fillStyle=c;ctx.beginPath();ctx.arc(p[0],p[1],4,0,7);ctx.fill();ctx.strokeStyle='rgba(255,255,255,.9)';ctx.lineWidth=1.5;ctx.stroke()}
…订阅 Builder 查看完整源码。查看价格