Floating Tile CTA Banner
介绍
收尾的橙色行动横幅：点阵底纹加底部暖黄光晕，四周散落几枚倾斜的半透明图标方块缓慢漂浮；居中大标题、两行说明、白色主按钮与浅橙次按钮，底部一条深橙卖点跑马灯不停横移。
拆自整页模板 燧云 全球网络平台首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Floating Tile CTA Banner 加进你的项目并换成你的配色。
适用场景
注册、下单、提交表单和落地页的行动号召按钮，需要一个让人愿意点的主操作时。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add suiyun-cta-tiles
mcp › 使用 8pt MCP 调用 get_component("suiyun-cta-tiles")
代码
Floating Tile CTA Banner 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-ctg"><div class="x-ctg__dots" aria-hidden="true"></div><div class="x-ctg__glow" aria-hidden="true"></div><div class="x-ctg__tiles" aria-hidden="true"><span class="x-ctg__tile" style="left:8%;top:16%;--r:-12deg;animation-delay:-0.0s"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m8.5 8-4 4 4 4"/><path d="m15.5 8 4 4-4 4"/><path d="m13.2 5.5-2.4 13"/></svg></span><span class="x-ctg__tile" style="left:76%;top:40%;--r:10deg;animation-delay:-0.9s"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4.2c2.6-.9 4.6-.8 5.3-.1.7.7.8 2.7-.1 5.3-.9 2.6-3.1 5.4-6.2 7.6l-3.5-3.5c2.2-3.1 5-5.3 7.6-6.2"/><path d="m10 13.5-3.5-1 2.6-3.3 3.1.4"/><path d="m10.5 14 1 3.5 3.3-2.6-.4-3.1"/><path d="M6.8 17.2c-1.2.4-2.1 1.5-2.3 2.9 1.4-.2 2.5-1.1 2.9-2.3"/></svg></span><span class="x-ctg__tile" style="left:83%;top:14%;--r:14deg;animation-delay:-1.8s"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17"/><path d="M12 3.5c2.4 2.3 3.6 5.1 3.6 8.5s-1.2 6.2-3.6 8.5c-2.4-2.3-3.6-5.1-3.6-8.5S9.6 5.8 12 3.5z"/></svg></span><span class="x-ctg__tile" style="left:14%;top:42%;--r:-6deg;animation-delay:-2.7s"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M13.2 3 5.5 13.4h5.6L10.4 21l7.9-10.6h-5.6z"/></svg></span><span class="x-ctg__tile" style="left:90%;top:52%;--r:-10deg;animation-delay:-3.6s"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="9.5" rx="2"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/><path d="M12 14.2v2.4"/></svg></span><span class="x-ctg__tile" style="left:26%;top:22%;--r:8deg;animation-delay:-4.5s"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="7" cy="5.5" r="2"/><circle cx="7" cy="18.5" r="2"/><circle cx="17" cy="8.5" r="2"/><path d="M7 7.5v9"/><path d="M17 10.5c0 3.5-4 3.5-8.6 6.5"/></svg></span></div><div class="x-ctg__in"><h2>构建，不设边界</h2><p>把基础设施的复杂度交给网络，一次部署，全球可用。现在就开始构建。</p><div class="x-ctg__btns"><a class="x-ctg__b1" href="#">开始构建</a><a class="x-ctg__b2" href="#">查看文档<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14"/><path d="m13.5 6.5 5.5 5.5-5.5 5.5"/></svg></a></div></div><div class="x-ctg__strip" aria-hidden="true"><div class="x-ctg__run"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.2 5 6v5.4c0 4.3 2.9 7.9 7 9.4 4.1-1.5 7-5.1 7-9.4V6z"/><path d="M12 8.5v4"/><path d="M12 15.6v.1"/></svg>抵御大规模攻击</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.3 4.3L19 7"/></svg>可预期的计费，没有意外</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="9.5" rx="2"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/><path d="M12 14.2v2.4"/></svg>身份感知的零信任访问</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4.2c2.6-.9 4.6-.8 5.3-.1.7.7.8 2.7-.1 5.3-.9 2.6-3.1 5.4-6.2 7.6l-3.5-3.5c2.2-3.1 5-5.3 7.6-6.2"/><path d="m10 13.5-3.5-1 2.6-3.3 3.1.4"/><path d="m10.5 14 1 3.5 3.3-2.6-.4-3.1"/><path d="M6.8 17.2c-1.2.4-2.1 1.5-2.3 2.9 1.4-.2 2.5-1.1 2.9-2.3"/></svg>久经考验的基础设施</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3.2 5 6v5.4c0 4.3 2.9 7.9 7 9.4 4.1-1.5 7-5.1 7-9.4V6z"/><path d="M12 8.5v4"/><path d="M12 15.6v.1"/></svg>抵御大规模攻击</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m5 12.5 4.3 4.3L19 7"/></svg>可预期的计费，没有意外</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="5" y="10.5" width="14" height="9.5" rx="2"/><path d="M8 10.5V8a4 4 0 0 1 8 0v2.5"/><path d="M12 14.2v2.4"/></svg>身份感知的零信任访问</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14.5 4.2c2.6-.9 4.6-.8 5.3-.1.7.7.8 2.7-.1 5.3-.9 2.6-3.1 5.4-6.2 7.6l-3.5-3.5c2.2-3.1 5-5.3 7.6-6.2"/><path d="m10 13.5-3.5-1 2.6-3.3 3.1.4"/><path d="m10.5 14 1 3.5 3.3-2.6-.4-3.1"/><path d="M6.8 17.2c-1.2.4-2.1 1.5-2.3 2.9 1.4-.2 2.5-1.1 2.9-2.3"/></svg>久经考验的基础设施</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-ctg{position:relative;width:100%;height:520px;border-radius:14px;overflow:hidden;background:#FF5D1D;color:#fff;font-family:"Inter Tight","Noto Sans SC",system-ui,sans-serif;isolation:isolate}.x-ctg__dots{position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,236,214,.34) 1px,transparent 1.3px);background-size:6px 6px;animation:x-ctg-shim 6s ease-in-out infinite}.x-ctg__glow{position:absolute;left:50%;bottom:-120px;z-index:-1;width:640px;height:300px;border-radius:50%;background:radial-gradient(closest-side,#FFF6D8 0%,#FFD98A 34%,rgba(255,160,70,.5) 62%,rgba(255,93,29,0) 100%);transform:translateX(-50%);animation:x-ctg-breathe 5.5s ease-in-out infinite}.x-ctg__tile{position:absolute;display:grid;place-items:center;width:62px;height:62px;border:1px solid rgba(255,255,255,.45);border-radius:10px;background:rgba(255,255,255,.14);box-shadow:0 10px 24px -14px rgba(120,30,0,.6);transform:rotate(var(--r));animation:x-ctg-float 7s ease-in-out infinite}.x-ctg__tile svg{width:24px;height:24px}.x-ctg__in{position:relative;display:flex;flex-direction:column;align-items:center;padding:120px 24px 0;text-align:center}.x-ctg h2{margin:0;font-size:clamp(32px,3.4vw,48px);font-weight:400;letter-spacing:-.015em}.x-ctg p{margin:22px 0 0;max-width:560px;font-size:16.5px;line-height:1.55;opacity:.95}.x-ctg__btns{display:flex;gap:10px;margin-top:32px}.x-ctg__btns a{display:inline-flex;align-items:center;gap:6px;height:46px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:500;text-decoration:none;transition:transform .25s,background .25s}.x-ctg__btns svg{width:15px;height:15px}.x-ctg__b1{background:#fff;color:#1d1d1d}.x-ctg__b2{background:rgba(255,255,255,.18);color:#fff}.x-ctg__btns a:hover{transform:translateY(-2px)}.x-ctg__b2:hover{background:rgba(255,255,255,.28)}.x-ctg__strip{position:absolute;left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;overflow:hidden;background:rgba(214,64,8,.55)}.x-ctg__run{display:flex;width:max-content;animation:x-ctg-run 26s linear infinite}.x-ctg__run span{display:inline-flex;align-items:center;gap:8px;padding:0 32px;font-size:14.5px;white-space:nowrap}.x-ctg__run svg{width:16px;height:16px}@keyframes x-ctg-float{50%{transform:rotate(var(--r)) translateY(-12px)}}@keyframes x-ctg-run{to{transform:translateX(-50%)}}@keyframes x-ctg-shim{50%{opacity:.55}}@keyframes x-ctg-breathe{50%{transform:translateX(-50%) scale(1.08,1.15);opacity:.85}}@media (max-width:640px){.x-ctg{height:600px}.x-ctg__in{padding-top:130px}.x-ctg__btns{flex-direction:column;align-self:stretch}.x-ctg__btns a{justify-content:center}.x-ctg__tile{width:46px;height:46px}.x-ctg__tile svg{width:18px;height:18px}.x-ctg__tile:nth-child(n+5){display:none}}@media (prefers-reduced-motion:reduce){.x-ctg__tile,.x-ctg__run,.x-ctg__dots,.x-ctg__glow{animation:none}.x-ctg__btns a{transition:none}}订阅 Builder 查看完整源码。查看价格