Floating Icons CTA
介绍
浅灰底上左右两簇倾斜的金融类 App 图标各自缓慢上下漂浮，中间是两段式标题、一段说明和灰色胶囊按钮。适合专题入口、垂直行业页的引导区块。
拆自整页模板 版拾 设计参考库官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Floating Icons CTA 加进你的项目并换成你的配色。
适用场景
首屏、登录页和发布页的背景层：给大面积留白加一点质感，又不抢正文。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add floating-icons-cta
mcp › 使用 8pt MCP 调用 get_component("floating-icons-cta")
代码
Floating Icons CTA 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-bfc"><section class="bs-fz"><div class="bs-fz__in"><span class="bs-fz__f" style="left:8%;top:6%;--r:-8deg;--d:0.00s"><span class="bs-ic " style="width:62px;height:62px;background:linear-gradient(145deg,#34d399,#059669)"><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="8"/><path d="M12 7v10M9.5 9.5h4a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 0 0 3h4"/></svg></span></span><span class="bs-fz__f" style="left:20%;top:24%;--r:6deg;--d:0.37s"><span class="bs-ic " style="width:72px;height:72px;background:linear-gradient(145deg,#1e3a8a,#1d4ed8)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9 12 4l9 5M5 10v7M9.5 10v7M14.5 10v7M19 10v7M3 20h18"/></svg></span></span><span class="bs-fz__f" style="left:6%;top:44%;--r:-4deg;--d:0.74s"><span class="bs-ic " style="width:80px;height:80px;background:#ffffff"><svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 18 9 12l4 3 7-9" stroke="#ef4444"/></svg></span></span><span class="bs-fz__f" style="left:22%;top:62%;--r:8deg;--d:1.11s"><span class="bs-ic " style="width:64px;height:64px;background:linear-gradient(145deg,#111827,#374151)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="12" r="4"/><path d="M12 12h9M18 12v3M21 12v2"/></svg></span></span><span class="bs-fz__f" style="left:12%;top:80%;--r:-6deg;--d:1.48s"><span class="bs-ic " style="width:58px;height:58px;background:linear-gradient(145deg,#f43f5e,#be123c)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6z"/></svg></span></span><span class="bs-fz__f" style="left:86%;top:4%;--r:8deg;--d:1.85s"><span class="bs-ic " style="width:60px;height:60px;background:linear-gradient(145deg,#a3e635,#4d7c0f)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="6" width="18" height="12" rx="2.5"/><path d="M3 10h18"/></svg></span></span><span class="bs-fz__f" style="left:74%;top:22%;--r:-6deg;--d:2.22s"><span class="bs-ic " style="width:70px;height:70px;background:linear-gradient(145deg,#1e3a8a,#1d4ed8)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M3 9 12 4l9 5M5 10v7M9.5 10v7M14.5 10v7M19 10v7M3 20h18"/></svg></span></span><span class="bs-fz__f" style="left:88%;top:42%;--r:4deg;--d:2.59s"><span class="bs-ic " style="width:78px;height:78px;background:linear-gradient(145deg,#f43f5e,#be123c)"><svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l7 3v6c0 4-3 7-7 9-4-2-7-5-7-9V6z"/></svg></span></span><span class="bs-fz__f" style="left:76%;top:62%;--r:-8deg;--d:2.96s"><span class="bs-ic " style="width:66px;height:66px;background:linear-gradient(145deg,#34d399,#059669)"><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="8"/><path d="M12 7v10M9.5 9.5h4a1.5 1.5 0 0 1 0 3h-3a1.5 1.5 0 0 0 0 3h4"/></svg></span></span><span class="bs-fz__f" style="left:86%;top:80%;--r:6deg;--d:3.33s"><span class="bs-ic " style="width:58px;height:58px;background:#ffffff"><svg viewBox="0 0 24 24" fill="none" stroke="#111" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><path d="M4 18 9 12l4 3 7-9" stroke="#ef4444"/></svg></span></span> <div class="bs-fz__c"><h2 class="bs-fz__h"><span>在做金融产品？</span><br>金融专区看得更深。</h2> <p>投资、银行与数字资产类 App，连同实名认证之后、换个地区才能看到的流程。团队版与企业版可用。</p> <a class="bs-btn bs-btn--gray" href="#">进入金融专区</a></div></div></section></div>
.x-bfc{--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-bfc *{box-sizing:border-box;margin:0;padding:0}.x-bfc{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-bfc a{color:inherit;text-decoration:none}.x-bfc button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-bfc .bs-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-bfc .bs-h2{font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;line-height:1.18;text-align:center}.x-bfc .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-bfc .bs-btn:active{transform:translateY(1px) scale(.98)}.x-bfc .bs-btn--dark{background:var(--ink);color:#fff}.x-bfc .bs-btn--dark:hover{background:#2a2a2e}.x-bfc .bs-btn--gray{background:#ececee;color:var(--ink)}.x-bfc .bs-btn--gray:hover{background:#e2e2e5}.x-bfc .bs-btn svg{width:16px;height:16px}.x-bfc .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-bfc .bs-ic svg{width:56%;height:56%}.x-bfc .bs-fz{background:var(--soft);padding:20px 24px 110px;overflow:hidden}.x-bfc .bs-fz__in{position:relative;width:100%;max-width:1000px;margin:0 auto;min-height:420px;display:flex;align-items:center;justify-content:center}.x-bfc .bs-fz__f{position:absolute;transform:rotate(var(--r));animation:xbfcFloat 6s ease-in-out infinite;animation-delay:var(--d)}.x-bfc .bs-fz__f .bs-ic{width:clamp(40px,5.4vw,72px)!important;height:clamp(40px,5.4vw,72px)!important}@keyframes xbfcFloat{50%{transform:rotate(var(--r)) translateY(-12px)}}.x-bfc .bs-fz__c{position:relative;z-index:2;text-align:center;max-width:440px}.x-bfc .bs-fz__h{font-size:clamp(26px,3.2vw,38px);font-weight:700;letter-spacing:-.03em;line-height:1.2}.x-bfc .bs-fz__h span{color:#8a8a90}.x-bfc .bs-fz__c p{margin:18px auto 28px;font-size:14px;color:var(--mut);line-height:1.7;max-width:380px}.x-bfc .bs-fz__c .bs-btn{background:#e4e4e7}@media (max-width:720px){.x-bfc .bs-fz{padding:10px 16px 80px}.x-bfc .bs-fz__in{min-height:620px}.x-bfc .bs-fz__c{padding:0 8px}.x-bfc .bs-fz__f{display:none}.x-bfc .bs-fz__f:nth-child(1){display:block;left:4%!important;top:2%!important}.x-bfc .bs-fz__f:nth-child(2){display:block;left:32%!important;top:7%!important}.x-bfc .bs-fz__f:nth-child(6){display:block;left:60%!important;top:3%!important}.x-bfc .bs-fz__f:nth-child(8){display:block;left:84%!important;top:8%!important}.x-bfc .bs-fz__f:nth-child(4){display:block;left:10%!important;top:86%!important}.x-bfc .bs-fz__f:nth-child(3){display:block;left:42%!important;top:90%!important}.x-bfc .bs-fz__f:nth-child(9){display:block;left:72%!important;top:85%!important}}@media (prefers-reduced-motion:reduce){.x-bfc .bs-fz__f{animation:none}}.x-bfc .bs-fz{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;padding:40px 24px}订阅 Builder 查看完整源码。查看价格