光核 Lumen 智能台灯众筹页 HTML 单页源码

光核 Lumen 是支持全光谱调节与生物钟同步的智能台灯众筹页，产品定位清晰——用最自然的光线守护用户的专注与睡眠，面向注重护眼与作息质量的都市人群。

页面采用深空蓝 + 青色辉光的赛博氛围，圆形灯体以径向渐变加外发光模拟真实光晕；顶部数据条展示已筹金额、支持人数、目标达成率与剩余时间，早鸟档卡片直接承接转化，众筹紧迫感十足。

它适合智能硬件创业团队、Kickstarter/摩点等众筹发起方，以及需要科技感产品页的 3C 品牌。数据条 + 档位卡的结构，是硬件众筹类单页的通用范式。

使用教程

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.0">
<title>光核 Lumen · 智能台灯众筹页</title>
<style>
  :root{--space:#0a1228;--deep:#0f1c3f;--cyan:#3fe0d0;--silver:#c8d2e8;--blue:#2b6cff}
  *{margin:0;padding:0;box-sizing:border-box}
  body{font-family:"Helvetica Neue","PingFang SC","Microsoft YaHei",sans-serif;background:var(--space);color:var(--silver);line-height:1.7;overflow-x:hidden}
  .wrap{max-width:1080px;margin:0 auto;padding:0 24px}
  .glow{position:fixed;top:-200px;left:50%;transform:translateX(-50%);width:700px;height:700px;background:radial-gradient(circle,rgba(63,224,208,.18),transparent 60%);z-index:0}
  header{position:relative;z-index:2;padding:26px 0}
  .nav{display:flex;align-items:center;justify-content:space-between}
  .logo{font-weight:800;letter-spacing:1px;font-size:20px;color:#fff}
  .logo span{color:var(--cyan)}
  .nav a{margin-left:24px;color:var(--silver);font-size:14px;transition:.2s}
  .nav a:hover{color:var(--cyan)}
  .hero{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding:70px 0 90px}
  .hero h1{font-size:46px;line-height:1.18;color:#fff;font-weight:800}
  .hero h1 em{color:var(--cyan);font-style:normal}
  .hero p{margin-top:20px;color:#9fb0d4;font-size:16px;max-width:440px}
  .btn{display:inline-block;margin-top:30px;background:var(--cyan);color:#04201d;padding:14px 36px;border-radius:40px;font-weight:800;transition:.25s}
  .btn:hover{transform:translateY(-3px);box-shadow:0 14px 36px rgba(63,224,208,.45)}
  .lamp{aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 40%,#bff7f0,#3fe0d0 40%,#0f1c3f 75%);box-shadow:0 0 90px rgba(63,224,208,.5);display:flex;align-items:center;justify-content:center;font-size:80px}
  .bar{position:relative;z-index:2;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:22px 30px;display:flex;justify-content:space-around;text-align:center;margin-bottom:80px}
  .bar b{display:block;color:var(--cyan);font-size:26px}
  .bar span{color:#8295bb;font-size:13px}
  .feat{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-bottom:80px}
  .feat .c{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:30px 24px}
  .feat .c h3{color:#fff;font-size:18px;margin-bottom:10px}
  .feat .c p{color:#9fb0d4;font-size:14px}
  .pledge{position:relative;z-index:2;text-align:center;padding:30px 0 100px}
  .pledge .card{display:inline-block;background:linear-gradient(135deg,var(--deep),#14306b);border:1px solid var(--blue);border-radius:24px;padding:44px 50px;max-width:460px}
  .pledge .card .amt{font-size:42px;font-weight:800;color:var(--cyan)}
  .pledge .card p{color:#c2cdec;margin:12px 0 24px}
  .pledge .card a{display:inline-block;background:var(--blue);color:#fff;padding:13px 38px;border-radius:40px;font-weight:700}
  footer{position:relative;z-index:2;text-align:center;padding:30px 0;color:#6c7ea6;font-size:13px;border-top:1px solid rgba(255,255,255,.08)}
  @media(max-width:760px){.hero{grid-template-columns:1fr;text-align:center}.hero p{margin-left:auto;margin-right:auto}.lamp{width:220px;margin:0 auto}.bar{flex-direction:column;gap:18px}.feat{grid-template-columns:1fr}.nav a{margin-left:14px}}
</style>
</head>
<body>
<div class="glow"></div>
<header><div class="wrap nav">
  <div class="logo">光核<span>Lumen</span></div>
  <nav><a href="#feat">特性</a><a href="#pledge">支持</a><a href="#foot">动态</a></nav>
</div></header>

<section class="hero"><div class="wrap" style="display:contents">
  <div>
    <h1>一盏<em>懂你</em>的光<br>从清晨到深夜</h1>
    <p>光核 Lumen 是支持全光谱调节与生物钟同步的智能台灯，用最自然的光线，守护你的专注与睡眠。</p>
    <a class="btn" href="#pledge">支持众筹</a>
  </div>
  <div class="lamp">💡</div>
</div></section>

<div class="wrap"><div class="bar">
  <div><b>¥1,286,400</b><span>已筹金额</span></div>
  <div><b>3,210</b><span>支持人数</span></div>
  <div><b>214%</b><span>目标达成</span></div>
  <div><b>12 天</b><span>剩余时间</span></div>
</div></div>

<section id="feat"><div class="wrap">
  <div class="feat">
    <div class="c"><h3>全光谱护眼</h3><p>显色指数 Ra97，无频闪无蓝光危害，长时间阅读也不疲劳。</p></div>
    <div class="c"><h3>生物钟同步</h3><p>随日出日落自动调节色温，白天提神、夜晚助眠。</p></div>
    <div class="c"><h3>语音 + App</h3><p>支持主流语音助手与手机远程控制，场景一键切换。</p></div>
  </div>
</div></section>

<section id="pledge"><div class="wrap pledge">
  <div class="card">
    <div class="amt">¥399 起</div>
    <p>早鸟档包含光核 Lumen 一台与磁吸底座，预计 3 月发货。</p>
    <a href="#">立即支持</a>
  </div>
</div></section>

<footer id="foot">© 2026 光核 Lumen · 让每一束光都刚刚好</footer>
</body>
</html>

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