Closing CTA Footer
介绍
灰色副句加绿色重点的两行收尾标题与黑色按钮，背后一团缓慢呼吸的绿色光晕；下方细线分隔的三栏链接页脚，中栏行业名录分两列，底行版权与条款。
拆自整页模板 潮引 获客智能体官网，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Closing CTA Footer 加进你的项目并换成你的配色。
适用场景
官网顶部导航、标签切换、分段控制、侧边导航和页脚。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add closing-cta-footer
mcp › 使用 8pt MCP 调用 get_component("closing-cta-footer")
代码
Closing CTA Footer 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-ccf"><section class="cy-end" id="start"><div class="cy-end__glow"></div><h2><span>这类承诺你听过太多次</span>这一次，<em>它真的跑得通</em></h2><a class="cy-btn" href="#hero">领取体验额度试一试<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14"/><path d="m13 6 6 6-6 6"/></svg></a></section><footer class="cy-ft" id="footer"><div class="cy-wrap"><div class="cy-ft__g"> <div><h4>产品与获客工具</h4><ul><li><a href="#hero">获客智能体</a></li><li><a href="#footer">企业名录库</a><span class="cy-tag">新</span></li><li><a href="#footer">地图商户数据集</a></li><li><a href="#footer">细分市场探索</a></li></ul> <div class="cy-ft__brand" style="margin-top:28px"><a class="cy-logo" href="#top" aria-label="潮引"><svg class="cy-logo__m" viewBox="0 0 28 28" aria-hidden="true"><circle cx="13" cy="15" r="9.5" fill="none" stroke="#C9C7C2" stroke-width="3"/><path d="M13 5.5a9.5 9.5 0 0 1 9.5 9.5" fill="none" stroke="#111" stroke-width="3" stroke-linecap="round"/><circle cx="22.5" cy="5.5" r="3.2" fill="#0D9467"/></svg><span>潮引</span></a><p>全天候工作的获客智能体，替你找到对的人。</p></div></div> <div><h4>行业名录</h4><ul class="cy-ft__two"><li><a href="#footer">华东企业</a></li><li><a href="#footer">华南企业</a></li><li><a href="#footer">华北企业</a></li><li><a href="#footer">西南企业</a></li><li><a href="#footer">东南亚企业</a></li><li><a href="#footer">中东企业</a></li><li><a href="#footer">欧洲企业</a></li><li><a href="#footer">北美企业</a></li><li><a href="#footer">拉美企业</a></li><li><a href="#footer">大洋洲企业</a></li></ul></div> <div><h4>资源</h4><ul><li><a href="#footer">关于我们</a></li><li><a href="#pricing">价格</a></li><li><a href="#footer">合作伙伴计划</a></li><li><a href="#footer">接口文档</a></li><li><a href="#faq">合规问答</a></li><li><a href="#footer">联系 hello@example.com</a></li></ul></div></div> <div class="cy-ft__bot"><span>© 2026 潮引 · 虚构品牌示例</span><nav><a href="#footer">使用条款</a><span>|</span><a href="#footer">隐私政策</a></nav></div></div></footer></div>
.x-ccf{--bg:#F6F5F3;--ink:#111111;--acc:#0D9467;--chip:#ECEBE9;--card:#FFFFFF;--mut:#8E8D8A;--sub:#5F5E5B;--line:#E7E5E1;--tile:#F4F4F3;
--sans:"Inter","PingFang SC","Hiragino Sans GB","Noto Sans CJK SC","Microsoft YaHei",system-ui,sans-serif;--ease:cubic-bezier(.22,1,.36,1)}.x-ccf *,.x-ccf *::before,.x-ccf *::after{box-sizing:border-box;margin:0;padding:0}.x-ccf{width:100%;text-align:left;font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:clip}.x-ccf a{color:inherit;text-decoration:none}.x-ccf button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}.x-ccf input{font:inherit;color:inherit}.x-ccf .cy-wrap{max-width:1080px;margin:0 auto;padding:0 24px}.x-ccf .cy-h2{font-size:clamp(28px,3vw,38px);font-weight:500;letter-spacing:-.02em;line-height:1.2;text-align:center}.x-ccf .cy-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 24px;border-radius:10px;background:#161616;color:#fff;font-size:15px;font-weight:500;transition:transform .2s var(--ease),background .2s}.x-ccf .cy-btn:hover{background:#2b2b2b}.x-ccf .cy-btn:active{transform:scale(.98)}.x-ccf .cy-btn svg{width:16px;height:16px;transition:transform .25s var(--ease)}.x-ccf .cy-btn:hover svg{transform:translateX(3px)}.x-ccf .cy-logo{display:inline-flex;align-items:center;gap:8px;font-size:20px;font-weight:600;letter-spacing:.02em}.x-ccf .cy-logo__m{width:26px;height:26px}.x-ccf .cy-tag{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:999px;background:var(--chip);color:var(--sub);font-size:11px;font-weight:500}@media (prefers-reduced-motion:reduce){.x-ccf *,.x-ccf *::before,.x-ccf *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.x-ccf .cy-m{display:none}}.x-ccf .cy-end{position:relative;padding:90px 24px 110px;text-align:center;overflow:hidden}.x-ccf .cy-end__glow{position:absolute;left:50%;top:50%;width:560px;height:300px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(13,148,103,.14),transparent);animation:xccfGlow 6s ease-in-out infinite;pointer-events:none}@keyframes xccfGlow{50%{transform:translate(-50%,-50%) scale(1.15);opacity:.6}}.x-ccf .cy-end h2{position:relative;font-size:clamp(32px,3.8vw,48px);font-weight:500;letter-spacing:-.03em;line-height:1.18}.x-ccf .cy-end h2 span{display:block;color:var(--mut)}.x-ccf .cy-end h2 em{font-style:normal;color:var(--acc)}.x-ccf .cy-end .cy-btn{position:relative;margin-top:34px}@media (max-width:760px){.x-ccf .cy-end{padding:56px 18px 72px}.x-ccf .cy-end__glow{width:320px}}.x-ccf .cy-ft{border-top:1px solid var(--line);padding:56px 0 40px;font-size:14px}.x-ccf .cy-ft__g{display:grid;grid-template-columns:1fr 2fr 1fr;gap:32px}.x-ccf .cy-ft h4{font-size:14px;font-weight:600;color:#5a5956;margin-bottom:14px}.x-ccf .cy-ft ul{list-style:none;display:grid;gap:9px}.x-ccf .cy-ft__two{display:grid;grid-template-columns:1fr 1fr;gap:9px 32px}.x-ccf .cy-ft li a{color:#7B7A77;transition:color .2s}.x-ccf .cy-ft li a:hover{color:var(--ink)}.x-ccf .cy-ft li .cy-tag{margin-left:6px;height:18px;font-size:10.5px;background:#ECEBE9}.x-ccf .cy-ft__brand p{margin-top:12px;color:#7B7A77;font-size:13.5px;line-height:1.6;max-width:240px}.x-ccf .cy-ft__bot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:48px;padding-top:22px;border-top:1px solid var(--line);font-size:13px;color:#7B7A77}.x-ccf .cy-ft__bot nav{display:flex;gap:14px}.x-ccf .cy-ft__bot a:hover{color:var(--ink)}@media (max-width:760px){.x-ccf .cy-ft{padding:40px 0 32px}.x-ccf .cy-ft__g{grid-template-columns:1fr;gap:28px}.x-ccf .cy-ft__bot{flex-direction:column;align-items:flex-start;margin-top:32px}}.x-ccf{min-height:min(860px,96vh);display:flex;flex-direction:column;justify-content:center;}.x-ccf .cy-end{padding:60px 24px 70px}.x-ccf .cy-ft{padding:44px 0 30px}订阅 Builder 查看完整源码。查看价格