Gradient Footer Panel
介绍
收尾区：小标签、行动标题与带打字占位的输入框，背景由米白过渡到蓝、粉、红、橙的竖向渐变；下方米色圆角页脚卡片含标志、五列链接和向上弹出的语言切换菜单。
拆自整页模板 念成 AI 应用构建器首页，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Gradient Footer Panel 加进你的项目并换成你的配色。
适用场景
官网顶部导航、标签切换、分段控制、侧边导航和页脚。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add gradient-footer-panel
mcp › 使用 8pt MCP 调用 get_component("gradient-footer-panel")
代码
Gradient Footer Panel 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<section class="x-gfp"><div class="gfp-bg" aria-hidden="true"></div><div class="gfp-cta"><small>AI 应用构建器</small><h2>准备好让想法上线了吗？</h2><form class="gfp-box cmp" action="#"><div class="cmp-f"><textarea rows="2" aria-label="描述你的想法"></textarea><span class="cmp-ph">让念成帮我做<b class="cmp-t"></b><i class="cmp-c"></i></span></div><div class="cmp-bar"><button type="button" class="cmp-add" aria-label="添加附件"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M12 5v14M5 12h14"/></svg></button><span class="cmp-sp"></span><div class="cmp-mode"><button type="button" class="cmp-mb" aria-haspopup="true"><span>构建</span><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></button><div class="cmp-menu"><button type="button" class="on">构建</button><button type="button">规划</button><button type="button">问答</button></div></div><button type="button" class="cmp-mic" aria-label="语音输入"><svg viewBox="0 0 24 24" width="17" height="17" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="3" width="6" height="11" rx="3"/><path d="M5 11a7 7 0 0 0 14 0M12 18v3"/></svg></button><button type="submit" class="cmp-go" aria-label="发送"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19V5M6 11l6-6 6 6"/></svg></button></div></form></div><footer class="gfp-card"><div class="gfp-l"><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><div class="gfp-lang"><button type="button" class="gfp-lb"><svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.7" 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><svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg></button><div class="gfp-lm"><button type="button" class="on">简体中文</button><button type="button">English</button><button type="button">日本語</button></div></div></div><nav><b>公司</b><a href="#">加入我们</a><a href="#">媒体资料</a><a href="#">企业版</a><a href="#">安全</a><a href="#">信任中心</a><a href="#">合作</a></nav><nav><b>产品</b><a href="#">价格</a><a href="#">学生优惠</a><a href="#">小团队</a><a href="#">创业者</a><a href="#">设计师</a><a href="#">内部工具</a><a href="#">下载应用</a></nav><nav><b>资源</b><a href="#">学习中心</a><a href="#">模板</a><a href="#">指南</a><a href="#">连接器</a><a href="#">视频</a><a href="#">博客</a><a href="#">帮助</a></nav><nav><b>条款</b><a href="#">隐私政策</a><a href="#">Cookie 设置</a><a href="#">服务条款</a><a href="#">平台规则</a><a href="#">无障碍</a></nav><nav><b>社区</b><a href="#">成为伙伴</a><a href="#">联盟计划</a><a href="#">行为准则</a><a href="#">社区论坛</a><a href="#">视频频道</a></nav></footer></section>
.x-gfp{--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-gfp,.x-gfp *{box-sizing:border-box}.x-gfp a{color:inherit;text-decoration:none}.x-gfp button{font:inherit;cursor:pointer;color:inherit}.x-gfp img{display:block;max-width:100%}.x-gfp .cmp{position:relative;width:100%;max-width:720px;margin:0 auto;background:rgba(255,255,255,.96);border-radius:28px;padding:16px 14px 12px 20px;box-shadow:0 1px 0 rgba(255,255,255,.8) inset,0 24px 60px -24px rgba(40,20,80,.35),0 0 0 1px rgba(20,20,20,.05);text-align:left;transition:box-shadow .3s}.x-gfp .cmp:focus-within{box-shadow:0 0 0 4px rgba(76,125,255,.18),0 24px 60px -24px rgba(40,20,80,.35)}.x-gfp .cmp-f{position:relative}.x-gfp .cmp textarea{width:100%;border:0;outline:0;resize:none;background:transparent;font:inherit;font-size:16px;line-height:1.5;color:var(--ink);padding:0;min-height:48px}.x-gfp .cmp-ph{position:absolute;left:0;top:0;font-size:16px;line-height:1.5;color:#8A8A85;pointer-events:none;white-space:nowrap;overflow:hidden;max-width:100%}.x-gfp .cmp-ph b{font-weight:400}.x-gfp .cmp-c{display:inline-block;width:1.5px;height:17px;background:#8A8A85;vertical-align:-3px;margin-left:1px;animation:cmpB 1s steps(1) infinite}.x-gfp .cmp.has .cmp-ph{opacity:0}@keyframes cmpB{50%{opacity:0}}.x-gfp .cmp-bar{display:flex;align-items:center;gap:6px;margin-top:4px}.x-gfp .cmp-sp{flex:1}.x-gfp .cmp-add{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:#6B6B66;transition:background .2s}.x-gfp .cmp-add:hover{background:var(--card)}.x-gfp .cmp-mode{position:relative}.x-gfp .cmp-mb{display:flex;align-items:center;gap:4px;height:30px;padding:0 10px;border:0;background:transparent;border-radius:10px;font-size:13px;color:#5F5F5B}.x-gfp .cmp-mb:hover{background:var(--card)}.x-gfp .cmp-mb svg{transition:transform .2s}.x-gfp .cmp-mode.open .cmp-mb svg{transform:rotate(180deg)}.x-gfp .cmp-menu{position:absolute;right:0;top:36px;z-index:5;min-width:120px;background:#fff;border-radius:12px;padding:6px;box-shadow:0 12px 32px -8px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.05);opacity:0;transform:translateY(-4px);pointer-events:none;transition:.18s}.x-gfp .cmp-mode.open .cmp-menu{opacity:1;transform:none;pointer-events:auto}.x-gfp .cmp-menu button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:7px 10px;border-radius:8px;font-size:13px}.x-gfp .cmp-menu button:hover{background:var(--card)}.x-gfp .cmp-menu button.on{font-weight:600}.x-gfp .cmp-mic{width:30px;height:30px;border:0;background:transparent;border-radius:50%;display:grid;place-items:center;color:#6B6B66}.x-gfp .cmp-mic:hover{background:var(--card)}.x-gfp .cmp-mic.rec{color:var(--red);animation:cmpP 1.2s infinite}@keyframes cmpP{50%{box-shadow:0 0 0 6px rgba(255,46,99,.15)}}.x-gfp .cmp-go{width:30px;height:30px;border:0;border-radius:50%;background:#1C1C1A;color:#fff;display:grid;place-items:center;opacity:.25;transition:opacity .2s,transform .2s}.x-gfp .cmp.has .cmp-go{opacity:1}.x-gfp .cmp.sent .cmp-go{transform:translateY(-3px)}.x-gfp .lg{display:inline-block;width:30px;height:30px;flex:none}.x-gfp .lg svg{width:100%;height:100%;display:block}.x-gfp{position:relative;width:100%;padding:70px 32px 32px;overflow:hidden;isolation:isolate;background:var(--cream)}.x-gfp .gfp-bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(130% 60% at 50% 34%,#FCFBF8 30%,rgba(252,251,248,0) 55%),linear-gradient(180deg,#FCFBF8 0%,#B9C8FF 26%,#5B7CFF 38%,#FF66CC 60%,#FF2E63 80%,#FF7A1A 100%);background-size:100% 100%;animation:gfpS 14s ease-in-out infinite alternate}@keyframes gfpS{to{filter:hue-rotate(-12deg) saturate(1.1)}}.x-gfp .gfp-cta{text-align:center;max-width:620px;margin:0 auto 64px}.x-gfp .gfp-cta small{display:block;font-size:14px;color:#6B6B66;margin-bottom:8px}.x-gfp h2{margin:0 0 26px;font-size:clamp(26px,3vw,34px);font-weight:600;letter-spacing:-.03em}.x-gfp .cmp{max-width:580px;border-radius:22px}.x-gfp .gfp-card{display:grid;grid-template-columns:1.1fr repeat(5,1fr);gap:24px;max-width:1280px;margin:0 auto;padding:30px 30px 26px;background:#F6F4EE;border-radius:18px;box-shadow:0 30px 60px -30px rgba(0,0,0,.25)}.x-gfp .gfp-l{display:flex;flex-direction:column;justify-content:space-between;gap:20px}.x-gfp nav b{display:block;font-size:13px;font-weight:600;margin-bottom:14px}.x-gfp nav a{display:block;font-size:13px;color:#6B6B66;margin-bottom:9px;transition:color .2s}.x-gfp nav a:hover{color:#1C1C1A}.x-gfp .gfp-lang{position:relative;align-self:flex-start}.x-gfp .gfp-lb{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px;border-radius:9px;border:0;background:#fff;box-shadow:0 0 0 1px var(--line);font-size:12px}.x-gfp .gfp-lm{position:absolute;left:0;bottom:36px;min-width:130px;background:#fff;border-radius:10px;padding:5px;box-shadow:0 12px 30px -8px rgba(0,0,0,.2),0 0 0 1px rgba(0,0,0,.05);opacity:0;transform:translateY(4px);pointer-events:none;transition:.18s}.x-gfp .gfp-lang.open .gfp-lm{opacity:1;transform:none;pointer-events:auto}.x-gfp .gfp-lm button{display:block;width:100%;text-align:left;border:0;background:transparent;padding:6px 10px;border-radius:7px;font-size:12px}.x-gfp .gfp-lm button:hover{background:var(--card)}.x-gfp .gfp-lm button.on{font-weight:600}@media (max-width:900px){.x-gfp{padding:56px 14px 14px}.x-gfp .gfp-card{grid-template-columns:repeat(2,1fr);padding:24px 20px}.x-gfp .gfp-l{grid-column:1/-1;flex-direction:row;align-items:center}}@media (prefers-reduced-motion:reduce){.x-gfp *,.x-gfp *::before,.x-gfp *::after{animation:none!important;transition:none!important}}.x-gfp{width:1200px;max-width:100%;box-sizing:border-box}(root) => {const cl=[];const cmpInit=(f,list,cl)=>{if(!f)return;const ta=f.querySelector('textarea'),t=f.querySelector('.cmp-t'),md=f.querySelector('.cmp-mode'),mb=f.querySelector('.cmp-mb'),mic=f.querySelector('.cmp-mic');let li=0,ci=list[0].length,del=false,tm;
const red=matchMedia('(prefers-reduced-motion: reduce)').matches;
const tick=()=>{const w=list[li];if(red){t.textContent=w;return}if(!del){if(ci>=w.length){t.textContent=w;del=true;tm=setTimeout(tick,2200);return}ci++;t.textContent=w.slice(0,ci);if(ci>=w.length){del=true;tm=setTimeout(tick,1600);return}}else{ci--;t.textContent=w.slice(0,ci);if(ci<=0){del=false;li=(li+1)%list.length}}tm=setTimeout(tick,del?35:85)};tick();
const upd=()=>f.classList.toggle('has',ta.value.trim().length>0);ta.addEventListener('input',upd);
const tog=e=>{e.stopPropagation();md.classList.toggle('open')};mb.addEventListener('click',tog);
const pick=e=>{const b=e.target.closest('.cmp-menu button');if(!b)return;md.querySelectorAll('.cmp-menu button').forEach(x=>x.classList.toggle('on',x===b));mb.querySelector('span').textContent=b.textContent;md.classList.remove('open')};md.addEventListener('click',pick);
const out=()=>md.classList.remove('open');document.addEventListener('click',out);
const mc=()=>mic.classList.toggle('rec');mic.addEventListener('click',mc);
const sub=e=>{e.preventDefault();f.classList.add('sent');setTimeout(()=>{f.classList.remove('sent');ta.value='';upd()},500)};f.addEventListener('submit',sub);
cl.push(()=>{clearTimeout(tm);document.removeEventListener('click',out)})};cmpInit(root.querySelector('.cmp'),["一个读书会报名页…","一家咖啡馆的会员系统…","团队周报自动汇总工具…"],cl);
const lg=root.querySelector('.gfp-lang'),lb=root.querySelector('.gfp-lb');const t=e=>{e.stopPropagation();lg.classList.toggle('open')};lb.addEventListener('click',t);
const p=e=>{const b=e.target.closest('.gfp-lm button');if(!b)return;lg.querySelectorAll('.gfp-lm button').forEach(x=>x.classList.toggle('on',x===b));lb.querySelector('span').textContent=b.textContent;lg.classList.remove('open')};lg.addEventListener('click',p);
…订阅 Builder 查看完整源码。查看价格