1. 小蓝资源网首页
  2. 网站源码

盒星球 BOXPLANET 潮玩盲盒商城 HTML 单页源码

小蓝IT • • 网站源码

糖果紫与荧光黄撞色的潮玩盲盒商城模板，含概率公示与抽盒玩法介绍。

盒星球 BOXPLANET 是一个面向潮玩盲盒品牌的电商展示单页，核心定位是把「手作质感」与「概率透明」做结合，让盲盒不再只是赌博式消费，而是可收藏、可交换的设计消费品。页面用一句话传达卖点：每一次开盒都是一次小小的宇宙。

视觉采用糖果紫为主色，搭配荧光黄点缀与深色描边，整体风格年轻、活泼、有冲击力；卡片式商品展示、进度条式的概率公示、立体盲盒首屏插画，让页面既有商城的促销氛围，又保留了潮玩文化的趣味性。

适合盲盒品牌官网、潮流玩具预售页、独立设计师作品集合页，也适合想学习电商展示结构、价格卡片与视觉化数据呈现的前端学习者。

盒星球 BOXPLANET 潮玩盲盒商城 HTML 单页源码

使用教程

1. 下载与保存

将下方 HTML 源码全部复制，保存为 index.html 文件（注意文件后缀必须是 .html）。

2. 本地预览

直接双击 index.html 文件，浏览器会自动打开并渲染页面效果。也可以在文件夹内运行 python -m http.server 后访问 localhost:8000 进行预览。

3. 自定义修改

替换文字：直接编辑 HTML 中的标题、段落文本与链接。调整配色：修改 <style> 标签内的 CSS 变量（:root 部分）或具体颜色值。更换图片：将 <img> 的 src 属性换成你自己的图片地址，或将背景渐变替换为 background-image。

4. 上线部署

将 index.html 上传到任意支持静态网页托管的服务（GitHub Pages、Vercel、Netlify、阿里云 OSS、腾讯云 COS 等）即可获得独立访问网址。

HTML 源码

复制下方完整代码，保存为 .html 文件即可在浏览器中预览使用。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>盒星球 BOXPLANET · 潮玩盲盒官方商城</title>
<style>
:root{
  --purple:#7b3ff2;
  --purple-deep:#4a1fa8;
  --lime:#e8ff3a;
  --pink:#ff5da2;
  --cream:#fdf8ff;
  --ink:#1b1030;
  --gray:#6b6280;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;background:var(--cream);color:var(--ink);line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

/* ===== 导航 ===== */
header{position:sticky;top:0;z-index:50;background:rgba(253,248,255,.88);backdrop-filter:blur(14px);border-bottom:3px solid var(--ink)}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:10px;font-weight:900;font-size:21px;letter-spacing:-.5px}
.logo .dot{width:34px;height:34px;border-radius:50%;background:var(--purple);position:relative;box-shadow:3px 3px 0 var(--ink)}
.logo .dot::after{content:"";position:absolute;width:12px;height:12px;border-radius:50%;background:var(--lime);top:6px;left:6px}
.menu{display:flex;gap:30px;font-size:15px;font-weight:600}
.menu a:hover{color:var(--purple)}
.btn{display:inline-block;padding:12px 26px;border-radius:999px;font-weight:800;font-size:15px;border:3px solid var(--ink);transition:.2s}
.btn-main{background:var(--lime);color:var(--ink);box-shadow:4px 4px 0 var(--ink)}
.btn-main:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn-ghost{background:#fff;color:var(--ink);box-shadow:4px 4px 0 var(--ink)}

/* ===== 首屏 ===== */
.hero{position:relative;overflow:hidden;padding:76px 0 90px;background:
  radial-gradient(circle at 82% 22%,rgba(232,255,58,.5),transparent 46%),
  radial-gradient(circle at 12% 78%,rgba(255,93,162,.4),transparent 48%),
  linear-gradient(160deg,#f3e9ff,#fdf8ff)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:52px;align-items:center}
.tag{display:inline-block;background:var(--ink);color:var(--lime);padding:7px 16px;border-radius:999px;font-size:13px;font-weight:800;letter-spacing:1px;margin-bottom:22px}
.hero h1{font-size:58px;line-height:1.08;font-weight:900;letter-spacing:-2px;margin-bottom:20px}
.hero h1 em{font-style:normal;background:linear-gradient(transparent 62%,var(--lime) 62%);padding:0 4px}
.hero p.lead{font-size:18px;color:var(--gray);max-width:460px;margin-bottom:32px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.stats{display:flex;gap:38px;flex-wrap:wrap}
.stats b{display:block;font-size:30px;font-weight:900;color:var(--purple)}
.stats span{font-size:13px;color:var(--gray)}

/* 盲盒立体展示 */
.boxstage{position:relative;height:400px;display:flex;align-items:center;justify-content:center}
.bigbox{width:250px;height:250px;border-radius:34px;background:linear-gradient(150deg,var(--purple),var(--purple-deep));border:4px solid var(--ink);box-shadow:14px 14px 0 var(--ink);display:flex;align-items:center;justify-content:center;font-size:104px;transform:rotate(-7deg)}
.bubble{position:absolute;border-radius:50%;border:3px solid var(--ink);display:flex;align-items:center;justify-content:center;font-size:34px;background:#fff;box-shadow:5px 5px 0 var(--ink)}
.b1{width:80px;height:80px;top:16px;right:26px;background:var(--lime)}
.b2{width:66px;height:66px;bottom:44px;left:8px;background:var(--pink)}
.b3{width:56px;height:56px;bottom:6px;right:78px;background:#fff}

/* ===== 玩法 ===== */
.section{padding:84px 0}
.sec-head{text-align:center;max-width:640px;margin:0 auto 52px}
.sec-head h2{font-size:38px;font-weight:900;letter-spacing:-1px;margin-bottom:12px}
.sec-head p{color:var(--gray);font-size:16px}
.how{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.how-card{background:#fff;border:3px solid var(--ink);border-radius:22px;padding:30px 26px;box-shadow:7px 7px 0 var(--ink)}
.how-card .no{width:44px;height:44px;border-radius:12px;background:var(--purple);color:#fff;font-weight:900;font-size:19px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;box-shadow:3px 3px 0 var(--ink)}
.how-card h3{font-size:19px;font-weight:800;margin-bottom:8px}
.how-card p{font-size:14.5px;color:var(--gray)}

/* ===== 商品 ===== */
.shop{background:var(--ink);color:#fff;padding:88px 0;border-top:4px solid var(--ink)}
.shop .sec-head h2{color:#fff}
.shop .sec-head p{color:#b9aede}
.goods{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.good{background:#2a1a4d;border:3px solid #4b3480;border-radius:20px;overflow:hidden;transition:.25s}
.good:hover{transform:translateY(-8px);border-color:var(--lime)}
.good .pic{height:170px;display:flex;align-items:center;justify-content:center;font-size:66px}
.g1 .pic{background:linear-gradient(140deg,#ff9ec7,#ff5da2)}
.g2 .pic{background:linear-gradient(140deg,#a5f3fc,#38bdf8)}
.g3 .pic{background:linear-gradient(140deg,#fde68a,var(--lime))}
.g4 .pic{background:linear-gradient(140deg,#c4b5fd,var(--purple))}
.good .info{padding:18px}
.good .series{font-size:12px;color:var(--lime);font-weight:800;letter-spacing:1px}
.good h4{font-size:17px;font-weight:800;margin:6px 0 10px}
.good .meta{display:flex;align-items:center;justify-content:space-between}
.good .price{font-size:21px;font-weight:900}
.good .price small{font-size:12px;font-weight:600;color:#b9aede}
.rare{display:inline-block;font-size:11px;background:var(--pink);color:#fff;padding:3px 9px;border-radius:999px;font-weight:800}

/* ===== 抽盒概率 ===== */
.odds{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.odds-panel{background:#fff;border:3px solid var(--ink);border-radius:24px;padding:32px;box-shadow:8px 8px 0 var(--ink)}
.bar-row{margin-bottom:20px}
.bar-row:last-child{margin-bottom:0}
.bar-top{display:flex;justify-content:space-between;font-size:14px;font-weight:700;margin-bottom:7px}
.bar{height:14px;border-radius:999px;background:#f0eaf9;border:2px solid var(--ink);overflow:hidden}
.bar i{display:block;height:100%}
.odds h2{font-size:34px;font-weight:900;letter-spacing:-1px;margin-bottom:16px}
.odds p{color:var(--gray);margin-bottom:14px}
.note{background:var(--lime);border:3px solid var(--ink);border-radius:16px;padding:16px 18px;font-size:14px;font-weight:700}

/* ===== 订阅 ===== */
.sub{background:linear-gradient(135deg,var(--purple),var(--pink));padding:78px 0;border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.sub-inner{max-width:660px;margin:0 auto;text-align:center;color:#fff}
.sub h2{font-size:36px;font-weight:900;letter-spacing:-1px;margin-bottom:12px}
.sub p{margin-bottom:28px;opacity:.95}
.form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.form input{flex:1;min-width:250px;padding:15px 20px;border-radius:999px;border:3px solid var(--ink);font-size:15px;font-family:inherit;outline:none}

/* ===== 页脚 ===== */
footer{background:var(--ink);color:#b9aede;padding:52px 0 30px}
.f-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:34px}
.f-grid h5{color:#fff;font-size:15px;font-weight:800;margin-bottom:14px}
.f-grid a,.f-grid li{display:block;font-size:14px;margin-bottom:9px;list-style:none}
.f-grid a:hover{color:var(--lime)}
.cp{border-top:1px solid #3a2a63;padding-top:22px;font-size:13px;text-align:center}

@media(max-width:980px){
  .hero-grid,.odds{grid-template-columns:1fr}
  .goods{grid-template-columns:repeat(2,1fr)}
  .how{grid-template-columns:1fr}
  .f-grid{grid-template-columns:1fr 1fr}
  .hero h1{font-size:42px}
}
@media(max-width:600px){
  .menu{display:none}
  .hero h1{font-size:34px}
  .sec-head h2{font-size:28px}
  .goods{grid-template-columns:1fr}
  .boxstage{height:300px}
  .bigbox{width:190px;height:190px;font-size:78px}
}
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="logo"><span class="dot"></span>盒星球 BOXPLANET</div>
    <nav class="menu">
      <a href="#how">抽盒玩法</a>
      <a href="#shop">全部系列</a>
      <a href="#odds">概率公示</a>
      <a href="#sub">月盒订阅</a>
    </nav>
    <a href="#shop" class="btn btn-main">立即抽盒</a>
  </div>
</header>

<section class="hero">
  <div class="wrap hero-grid">
    <div>
      <span class="tag">2026 新系列 · 星旅小队上线</span>
      <h1>每一次开盒<br>都是一次<em>小小的宇宙</em></h1>
      <p class="lead">盒星球联合 30+ 独立设计师，把手作质感的潮玩装进盲盒。官方正品、概率公示、隐藏款可换，让惊喜也讲道理。</p>
      <div class="hero-cta">
        <a href="#shop" class="btn btn-main">开始抽盒 ¥59 起</a>
        <a href="#odds" class="btn btn-ghost">查看概率公示</a>
      </div>
      <div class="stats">
        <div><b>128 万+</b><span>累计开盒次数</span></div>
        <div><b>30+</b><span>合作设计师</span></div>
        <div><b>4.9</b><span>用户平均评分</span></div>
      </div>
    </div>
    <div class="boxstage">
      <div class="bigbox">🎁</div>
      <div class="bubble b1">⭐</div>
      <div class="bubble b2">🐰</div>
      <div class="bubble b3">🚀</div>
    </div>
  </div>
</section>

<section class="section" id="how">
  <div class="wrap">
    <div class="sec-head">
      <h2>三步开出你的第一只</h2>
      <p>从选系列到收藏上架，全流程透明，没有套路。</p>
    </div>
    <div class="how">
      <div class="how-card">
        <div class="no">1</div>
        <h3>挑一个心动系列</h3>
        <p>每个系列 12 款常规 + 1 款隐藏，设计稿与款式全部提前公开，喜欢再下单。</p>
      </div>
      <div class="how-card">
        <div class="no">2</div>
        <h3>线上抽盒或到店摇</h3>
        <p>线上抽盒实时出结果，48 小时内发货；线下门店支持现场摇盒，端盒还能免费拆。</p>
      </div>
      <div class="how-card">
        <div class="no">3</div>
        <h3>重复款自由交换</h3>
        <p>抽到重复款可进入换娃社区，凭订单号一对一置换，运费平台补贴一半。</p>
      </div>
    </div>
  </div>
</section>

<section class="shop" id="shop">
  <div class="wrap">
    <div class="sec-head">
      <h2>本月热门系列</h2>
      <p>限量发售，售罄不补。所有系列均提供开盒直播回放。</p>
    </div>
    <div class="goods">
      <div class="good g1">
        <div class="pic">🐰</div>
        <div class="info">
          <div class="series">SERIES 07</div>
          <h4>软糖兔·下午茶</h4>
          <div class="meta"><span class="price">¥69<small> /盒</small></span><span class="rare">隐藏 1/144</span></div>
        </div>
      </div>
      <div class="good g2">
        <div class="pic">🐳</div>
        <div class="info">
          <div class="series">SERIES 05</div>
          <h4>深海旅行手记</h4>
          <div class="meta"><span class="price">¥59<small> /盒</small></span><span class="rare">隐藏 1/120</span></div>
        </div>
      </div>
      <div class="good g3">
        <div class="pic">🍋</div>
        <div class="info">
          <div class="series">SERIES 09</div>
          <h4>柠檬夏日祭</h4>
          <div class="meta"><span class="price">¥79<small> /盒</small></span><span class="rare">隐藏 1/96</span></div>
        </div>
      </div>
      <div class="good g4">
        <div class="pic">🚀</div>
        <div class="info">
          <div class="series">NEW · 星旅小队</div>
          <h4>星旅小队·首航</h4>
          <div class="meta"><span class="price">¥89<small> /盒</small></span><span class="rare">隐藏 1/72</span></div>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="section" id="odds">
  <div class="wrap odds">
    <div>
      <h2>概率公开，才敢叫惊喜</h2>
      <p>我们把每个系列的抽中概率完整公示在商品页与包装内页，并接受第三方抽样复核。开盒不该是黑箱，运气也需要被尊重。</p>
      <p>连续 12 次未抽中隐藏款，第 13 次自动进入保底池，隐藏款概率提升至 1/12。</p>
      <div class="note">📦 全系列支持 7 天无理由退换（未拆封），端盒购买直接锁定全套常规款。</div>
    </div>
    <div class="odds-panel">
      <div class="bar-row">
        <div class="bar-top"><span>常规款（12 款均等）</span><span>91.7%</span></div>
        <div class="bar"><i style="width:91.7%;background:var(--purple)"></i></div>
      </div>
      <div class="bar-row">
        <div class="bar-top"><span>特别配色款</span><span>6.9%</span></div>
        <div class="bar"><i style="width:6.9%;background:var(--pink)"></i></div>
      </div>
      <div class="bar-row">
        <div class="bar-top"><span>隐藏款</span><span>1.4%</span></div>
        <div class="bar"><i style="width:1.4%;background:var(--lime)"></i></div>
      </div>
      <div class="bar-row">
        <div class="bar-top"><span>保底触发后隐藏款</span><span>8.3%</span></div>
        <div class="bar"><i style="width:8.3%;background:#38bdf8"></i></div>
      </div>
    </div>
  </div>
</section>

<section class="sub" id="sub">
  <div class="wrap sub-inner">
    <h2>加入月盒计划</h2>
    <p>每月一只当季新款 + 独家周边，订阅价立减 20%，随时可退订。</p>
    <form class="form" onsubmit="return false">
      <input type="email" placeholder="输入邮箱，领取新人 20 元券">
      <button class="btn btn-main" type="submit">立即订阅</button>
    </form>
  </div>
</section>

<footer>
  <div class="wrap">
    <div class="f-grid">
      <div>
        <h5>盒星球 BOXPLANET</h5>
        <p style="font-size:14px">把手作质感的潮玩装进盲盒，让每一次开盒都值得期待。</p>
      </div>
      <div>
        <h5>购物</h5>
        <a href="#shop">全部系列</a><a href="#sub">月盒订阅</a><a href="#">端盒专区</a>
      </div>
      <div>
        <h5>服务</h5>
        <a href="#odds">概率公示</a><a href="#">物流查询</a><a href="#">退换政策</a>
      </div>
      <div>
        <h5>关于</h5>
        <a href="#">设计师招募</a><a href="#">线下门店</a><a href="#">联系我们</a>
      </div>
    </div>
    <div class="cp">© 2026 盒星球 BOXPLANET · 本页为演示用 HTML 单页模板</div>
  </div>
</footer>

</body>
</html>

原创文章，作者：小蓝IT，如若转载，请注明出处：https://www.xiaolanzy.com/2037.html

赞 (0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
0 0

关于作者

小蓝IT的头像

小蓝IT

495 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
极光旅人 Aurora 极地探险旅行品牌官网 HTML 单页源码
上一篇 23小时前
巷子里 LANE Space 共享办公空间招租 HTML 单页源码
下一篇 47分钟前

相关推荐

发表回复

登录后才能评论
分享本页
返回顶部
icon 首页
icon 网站源码
icon IT资讯
icon 网站客服