Electric Border Pricing
介绍
三栏报价卡，推荐档用旋转的暖橙流光描边加外发光突出，其他两档保持克制的深色卡面；卡片悬停轻微上浮，点击按钮切换为已选择。金额以示意呈现，窄屏改为单列。
拆自整页模板 砚白 独立设计师作品集，可以单独使用，也能和同一模板拆出的其他组件拼回整页。
纯 HTML、CSS 与少量原生 JS，没有框架依赖。复制提示词交给 Claude Code、Cursor、Trae 或 Codex，模型会把 Electric Border Pricing 加进你的项目并换成你的配色。
适用场景
SaaS 定价页、升级弹窗、方案对比和按月 / 按年切换。
安装
订阅 Builder 后，用 8pt CLI 装进项目，或在已接入 8pt MCP 的编辑器里直接调用。
$ npm i -g @8pt-dev/cli && 8pt add electric-border-pricing
mcp › 使用 8pt MCP 调用 get_component("electric-border-pricing")
代码
Electric Border Pricing 的源码，动效只用 transform 与 opacity，并尊重减少动态效果设置。
<div class="x-ebp"><div class="x-ebp__head"><h2>报价</h2><p>开工前先谈好一口价 · 金额为示意</p></div><div class="x-ebp__plans"><article class="x-ebp__plan"><div class="x-ebp__body"><h3>官网</h3><div class="x-ebp__amt"><b>¥2.8万</b><span>起</span></div><ul><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>设计与开发</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>按需加入动效与 3D</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>内容可自行编辑</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>二到四周上线</li></ul><button type="button" class="x-ebp__pick">选这个</button></div></article><article class="x-ebp__plan x-ebp__plan--hot"><span class="x-ebp__ring" aria-hidden="true"></span><div class="x-ebp__body"><h3>长期合作</h3><div class="x-ebp__amt"><b>¥3.5万</b><span>每月</span></div><ul><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>随时提需求</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>每隔几天交付更新</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>排期优先</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>可随时暂停或结束</li></ul><button type="button" class="x-ebp__pick">选这个<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 6l6 6-6 6"/></svg></button></div></article><article class="x-ebp__plan"><div class="x-ebp__body"><h3>产品设计</h3><div class="x-ebp__amt"><b>¥4.2万</b><span>起</span></div><ul><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>后台与 SaaS 产品</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>双平台移动应用</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>完整设计系统</li><li><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12.5l4.5 4.5L19 7.5"/></svg>可直接交付开发的原型</li></ul><button type="button" class="x-ebp__pick">选这个</button></div></article></div></div>
.x-ebp{box-sizing:border-box;width:100%;max-width:1000px;margin:0 auto;padding:30px 18px 18px;border-radius:26px;background:#1d1b19;color:#efe9de;font-family:"PingFang SC","Noto Sans SC","Noto Sans CJK SC",system-ui,sans-serif;box-shadow:0 0 0 1px rgba(239,233,222,.09),0 40px 100px -30px rgba(0,0,0,.8)}.x-ebp *,.x-ebp *::before,.x-ebp *::after{box-sizing:border-box}.x-ebp svg{width:1em;height:1em;flex:none}.x-ebp__head{padding:0 18px 22px}.x-ebp__head h2{margin:0;font-size:22px;font-weight:600}.x-ebp__head p{margin:6px 0 0;font-size:13px;color:#8f877c}.x-ebp__plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.x-ebp__plan{position:relative;border-radius:20px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}.x-ebp__plan:hover{transform:translateY(-4px)}.x-ebp__body{position:relative;z-index:1;display:flex;flex-direction:column;height:100%;padding:26px 24px 22px;border-radius:20px;background:linear-gradient(180deg,#2a2725,#232120);box-shadow:inset 0 0 0 1px rgba(239,233,222,.09),inset 0 1px 0 rgba(255,255,255,.04)}.x-ebp__plan h3{margin:0;font-size:14px;font-weight:600}.x-ebp__amt{display:flex;align-items:baseline;gap:8px;margin:14px 0 20px;padding-bottom:20px;border-bottom:1px solid rgba(239,233,222,.09)}.x-ebp__amt b{font-size:38px;font-weight:600;font-variant-numeric:tabular-nums}.x-ebp__amt span{font-size:13px;color:#8f877c}.x-ebp__plan ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px;font-size:13px;color:#cfc6ba}.x-ebp__plan li{display:flex;align-items:center;gap:10px}.x-ebp__plan li svg{color:#8f877c;font-size:14px}.x-ebp__pick{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:auto;height:44px;border:0;border-radius:99px;background:#2f2c29;color:#efe9de;font:inherit;font-size:13px;font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(239,233,222,.09);transition:background .2s}.x-ebp__pick:hover{background:#3a3532}.x-ebp__plan--hot{box-shadow:0 0 34px -4px rgba(240,150,80,.55),0 0 80px -20px rgba(240,150,80,.5)}.x-ebp__plan--hot .x-ebp__body{inset:auto;margin:2px;height:calc(100% - 4px);border-radius:18px;background:linear-gradient(180deg,#2e2925,#24201d)}.x-ebp__plan--hot li svg{color:#f0b07a}.x-ebp__plan--hot .x-ebp__pick{background:linear-gradient(90deg,#f4c399,#fff3e4);color:#2a1d12;box-shadow:0 0 24px rgba(240,160,90,.4)}.x-ebp__ring{position:absolute;inset:0;border-radius:20px;overflow:hidden}.x-ebp__ring::before{content:"";position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;background:conic-gradient(#f7b77c,#fff1de,#e3803f 30%,#3a2a1f 45%,#3a2a1f 55%,#ffd6ac 70%,#f7b77c);transform:translate(-50%,-50%) rotate(0deg);animation:x-ebp-spin 4s linear infinite}@keyframes x-ebp-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@media (max-width:760px){.x-ebp__plans{grid-template-columns:1fr}.x-ebp__amt b{font-size:28px}}@media (prefers-reduced-motion:reduce){.x-ebp__ring::before{animation:none}.x-ebp__plan{transition:none}}(root) => {
const plans = [...root.querySelectorAll('.x-ebp__plan')];
const onClick = e => {
const b = e.target.closest('.x-ebp__pick');
if (!b) return;
plans.forEach(p => { const pick = p.querySelector('.x-ebp__pick'); pick.firstChild.textContent = p.contains(b) ? '已选择' : '选这个'; });
};
root.addEventListener('click', onClick);
return () => root.removeEventListener('click', onClick);
}订阅 Builder 查看完整源码。查看价格