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

Aurora One 耳机产品展示页 HTML 单页源码

小蓝IT • • 网站源码 • 阅读 17

暗色科技风的产品详情落地页，含参数条、特性卡片、规格表与 CSS 耳机模型。

本源码是一款高端消费电子产品展示落地页模板，以纯黑背景搭配荧光绿作为高亮色，极具科技感与冲击力。首屏左侧为产品卖点、价格与行动按钮，右侧使用纯 CSS 绘制了一副头戴式耳机的占位模型，无需任何图片素材即可呈现完整的产品氛围。

页面往下依次布置核心参数条（降噪深度/续航/延迟/重量）、八大特性卡片、完整规格表以及底部购买 CTA。所有模块使用 Grid/Flex 响应式布局，移动端会自动转为单列堆叠，保证在不同设备上都能清晰展示产品信息。

适合 3C 数码、智能硬件、耳机音箱等品牌在上线预售、众筹或电商详情页时使用。将耳机占位模型替换为真实产品渲染图，并更新参数与价格，即可直接作为商品落地页部署。

Aurora One 耳机产品展示页 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.0">
<title>Aurora One 无线降噪耳机 · 产品展示</title>
<style>
:root{
  --bg:#0f1012;
  --panel:#17181c;
  --line:#2a2c33;
  --text:#f2f3f5;
  --muted:#9b9fa8;
  --accent:#c8ff4d;
  --accent2:#7ee0ff;
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"PingFang SC","Microsoft YaHei","Noto Sans SC",sans-serif;
  background:var(--bg);color:var(--text);line-height:1.75;-webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}

/* 顶栏 */
header{position:sticky;top:0;z-index:30;background:rgba(15,16,18,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px}
.logo{font-weight:900;letter-spacing:.16em;font-size:16px}
.logo b{color:var(--accent)}
.nav ul{display:flex;gap:30px;list-style:none;font-size:14px;color:var(--muted)}
.nav ul a:hover{color:var(--text)}
.buy{padding:10px 22px;border-radius:99px;background:var(--accent);color:#12160a;font-weight:800;font-size:14px;transition:.25s}
.buy:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(200,255,77,.26)}

/* 主视觉 */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center;padding:70px 0 80px}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.2em;color:var(--accent);margin-bottom:20px}
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}
.hero h1{font-size:clamp(36px,5.4vw,62px);line-height:1.08;font-weight:900;letter-spacing:-.02em;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--accent)}
.hero .lead{color:var(--muted);font-size:16.5px;max-width:460px;margin-bottom:30px}
.price{display:flex;align-items:baseline;gap:12px;margin-bottom:26px}
.price .now{font-size:38px;font-weight:900}
.price .old{font-size:16px;color:#6e7280;text-decoration:line-through}
.price .off{font-size:12px;padding:4px 11px;border-radius:6px;background:rgba(200,255,77,.14);color:var(--accent);font-weight:700}
.acts{display:flex;gap:13px;flex-wrap:wrap}
.b-main{padding:14px 34px;border-radius:12px;background:var(--accent);color:#12160a;font-weight:800;font-size:15px;transition:.25s}
.b-ghost{padding:14px 30px;border-radius:12px;border:1px solid var(--line);font-size:15px;transition:.25s}
.b-main:hover{transform:translateY(-2px)}
.b-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* 产品图（纯 CSS 绘制耳机） */
.stage{
  position:relative;aspect-ratio:1/1;border-radius:28px;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 40%,#25272e,#131417 68%);
  border:1px solid var(--line);overflow:hidden;
}
.stage::before{
  content:"";position:absolute;width:78%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(200,255,77,.16),transparent 66%);
  animation:pulse 5s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(.92);opacity:.65}50%{transform:scale(1.06);opacity:1}}
.hp{position:relative;width:62%;aspect-ratio:1/1.05}
.hp .band{
  position:absolute;top:0;left:12%;right:12%;height:52%;
  border:20px solid #3a3d46;border-bottom:none;border-radius:180px 180px 0 0;
  box-shadow:inset 0 4px 10px rgba(255,255,255,.09), 0 12px 30px rgba(0,0,0,.5);
}
.hp .cup{
  position:absolute;bottom:6%;width:31%;height:44%;border-radius:26px;
  background:linear-gradient(150deg,#4a4e58,#23252b);
  box-shadow:0 16px 36px rgba(0,0,0,.6),inset 0 2px 6px rgba(255,255,255,.12);
}
.hp .cup::after{
  content:"";position:absolute;inset:18%;border-radius:18px;
  background:linear-gradient(150deg,#15161a,#0c0d10);box-shadow:inset 0 3px 12px rgba(0,0,0,.8);
}
.hp .cup.l{left:2%}
.hp .cup.r{right:2%}
.hp .cup.r::before{
  content:"";position:absolute;right:14%;top:12%;width:9px;height:9px;border-radius:50%;
  background:var(--accent);box-shadow:0 0 12px var(--accent);z-index:2;
}
.stage .tag{
  position:absolute;top:22px;left:22px;font-size:11.5px;letter-spacing:.18em;color:var(--muted);
  border:1px solid var(--line);padding:6px 13px;border-radius:99px;background:rgba(0,0,0,.34);
}

/* 配色选择 */
.colors{display:flex;gap:12px;margin-top:24px;align-items:center}
.colors span{font-size:13px;color:var(--muted);margin-right:4px}
.dot{width:30px;height:30px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:.22s}
.dot:hover,.dot.on{border-color:var(--accent);transform:scale(1.1)}
.d1{background:#2b2d33}.d2{background:#e8e6e1}.d3{background:#3e5a86}.d4{background:#8a5a3c}

/* 参数条 */
.stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:18px;overflow:hidden;margin-bottom:80px;
}
.stats div{background:var(--panel);padding:28px 18px;text-align:center}
.stats b{display:block;font-size:30px;font-weight:900;color:var(--accent);margin-bottom:5px;letter-spacing:-.02em}
.stats span{font-size:13px;color:var(--muted)}

/* 特性 */
section{padding:0 0 84px}
.sec-h{text-align:center;margin-bottom:46px}
.sec-h em{font-style:normal;font-size:12px;letter-spacing:.28em;color:var(--accent);display:block;margin-bottom:12px}
.sec-h h2{font-size:clamp(26px,4vw,40px);font-weight:900;letter-spacing:-.02em}
.feats{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.f{
  background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px 26px;transition:.32s;
}
.f:hover{transform:translateY(-6px);border-color:#414550;box-shadow:0 22px 46px rgba(0,0,0,.5)}
.f .ic{
  width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:21px;
  background:rgba(200,255,77,.12);color:var(--accent);margin-bottom:16px;
}
.f:nth-child(even) .ic{background:rgba(126,224,255,.12);color:var(--accent2)}
.f h4{font-size:17.5px;margin-bottom:8px}
.f p{font-size:14px;color:var(--muted)}

/* 规格表 */
.spec{background:var(--panel);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.spec .row{display:grid;grid-template-columns:200px 1fr;border-bottom:1px solid var(--line)}
.spec .row:last-child{border-bottom:none}
.spec .k{padding:17px 26px;color:var(--muted);font-size:14px;background:rgba(255,255,255,.018)}
.spec .v{padding:17px 26px;font-size:14.5px}

/* CTA */
.cta{
  margin-top:80px;text-align:center;padding:58px 30px;border-radius:24px;
  background:linear-gradient(135deg,rgba(200,255,77,.13),rgba(126,224,255,.08));
  border:1px solid var(--line);
}
.cta h3{font-size:clamp(23px,3.6vw,34px);font-weight:900;margin-bottom:12px}
.cta p{color:var(--muted);margin-bottom:26px}

footer{border-top:1px solid var(--line);padding:32px 0;text-align:center;color:#6e7280;font-size:13px}

@media(max-width:880px){
  .hero{grid-template-columns:1fr;gap:36px;padding:44px 0 56px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .nav ul{display:none}
  .spec .row{grid-template-columns:1fr}
  .spec .k{padding-bottom:0;background:none}
}
</style>
</head>
<body>

<header>
  <div class="wrap nav">
    <div class="logo">AURORA<b>·</b>AUDIO</div>
    <ul>
      <li><a href="#feature">核心特性</a></li>
      <li><a href="#spec">技术规格</a></li>
      <li><a href="#">评测报告</a></li>
      <li><a href="#">售后服务</a></li>
    </ul>
    <a href="#" class="buy">立即购买</a>
  </div>
</header>

<div class="wrap">
  <div class="hero">
    <div>
      <div class="eyebrow">NEW · 第三代主动降噪</div>
      <h1>听见<em>安静</em><br>本来的样子</h1>
      <p class="lead">Aurora One 搭载自研 A3 降噪芯片与双馈麦克风阵列，把 48dB 的城市噪声折叠进一片沉静之中。</p>
      <div class="price">
        <span class="now">¥1,299</span>
        <span class="old">¥1,699</span>
        <span class="off">首发直降 400</span>
      </div>
      <div class="acts">
        <a href="#" class="b-main">加入购物车</a>
        <a href="#spec" class="b-ghost">查看规格</a>
      </div>
      <div class="colors">
        <span>配色</span>
        <div class="dot d1 on" title="曜石黑"></div>
        <div class="dot d2" title="月岩白"></div>
        <div class="dot d3" title="深海蓝"></div>
        <div class="dot d4" title="暮沙棕"></div>
      </div>
    </div>
    <div class="stage">
      <div class="tag">A U R O R A &nbsp; O N E</div>
      <div class="hp">
        <div class="band"></div>
        <div class="cup l"></div>
        <div class="cup r"></div>
      </div>
    </div>
  </div>

  <div class="stats">
    <div><b>48<small style="font-size:16px">dB</small></b><span>主动降噪深度</span></div>
    <div><b>62<small style="font-size:16px">h</small></b><span>综合续航时长</span></div>
    <div><b>0.05<small style="font-size:16px">s</small></b><span>超低延迟模式</span></div>
    <div><b>249<small style="font-size:16px">g</small></b><span>整机轻量机身</span></div>
  </div>

  <section id="feature">
    <div class="sec-h"><em>F E A T U R E S</em><h2>值得升级的四个理由</h2></div>
    <div class="feats">
      <div class="f"><div class="ic">◐</div><h4>自适应降噪</h4><p>每秒 1200 次环境采样，地铁、机舱、咖啡馆自动切换降噪曲线，无需手动调节。</p></div>
      <div class="f"><div class="ic">♫</div><h4>Hi-Res 无损音质</h4><p>40mm 镀铍振膜单元 + LDAC 990kbps 传输，完整还原录音棚级别的动态细节。</p></div>
      <div class="f"><div class="ic">⚡</div><h4>闪充十分钟</h4><p>USB-C 快充 10 分钟可听 8 小时，通勤前充电，一整天都不用担心断电。</p></div>
      <div class="f"><div class="ic">◈</div><h4>空间音频</h4><p>支持头部追踪的动态空间音频，看电影时声场随视线自然移动，沉浸感翻倍。</p></div>
      <div class="f"><div class="ic">✆</div><h4>六麦通话降噪</h4><p>骨传导传感器配合波束成形，大风天户外通话对方依然听得清晰。</p></div>
      <div class="f"><div class="ic">⧉</div><h4>双设备无缝切换</h4><p>电脑会议与手机来电之间自动流转，无需反复断开重连。</p></div>
      <div class="f"><div class="ic">☂</div><h4>IPX5 生活防水</h4><p>汗水与小雨无惧，运动通勤两不误，配套收纳盒亦为硬壳防护。</p></div>
      <div class="f"><div class="ic">⚙</div><h4>APP 深度定制</h4><p>10 段图形均衡器、按键自定义、佩戴检测灵敏度，都可在 App 内调整。</p></div>
    </div>
  </section>

  <section id="spec">
    <div class="sec-h"><em>S P E C I F I C A T I O N S</em><h2>技术规格</h2></div>
    <div class="spec">
      <div class="row"><div class="k">型号</div><div class="v">Aurora One (AR-H300)</div></div>
      <div class="row"><div class="k">驱动单元</div><div class="v">40mm 镀铍复合振膜动圈</div></div>
      <div class="row"><div class="k">频响范围</div><div class="v">8 Hz – 40,000 Hz</div></div>
      <div class="row"><div class="k">蓝牙版本</div><div class="v">Bluetooth 5.4，支持 SBC / AAC / LDAC / LC3</div></div>
      <div class="row"><div class="k">降噪深度</div><div class="v">最高 48dB，五档可调 + 通透模式</div></div>
      <div class="row"><div class="k">电池容量</div><div class="v">800mAh，开启降噪 42 小时 / 关闭降噪 62 小时</div></div>
      <div class="row"><div class="k">充电接口</div><div class="v">USB Type-C，支持 Qi 无线充电</div></div>
      <div class="row"><div class="k">重量</div><div class="v">249g（含耳罩），收纳盒 186g</div></div>
      <div class="row"><div class="k">包装清单</div><div class="v">耳机 ×1、硬壳收纳盒 ×1、Type-C 线 ×1、3.5mm 音频线 ×1、机上转接头 ×1、说明书</div></div>
      <div class="row"><div class="k">质保政策</div><div class="v">整机 2 年，电池 1 年，7 天无理由退货</div></div>
    </div>

    <div class="cta">
      <h3>现在下单，赠送定制收纳内胆</h3>
      <p>首发期间下单即赠限量麂皮内胆包，数量有限，送完即止。</p>
      <a href="#" class="b-main">¥1,299 立即购买</a>
    </div>
  </section>
</div>

<footer>
  <div class="wrap">© 2026 Aurora Audio · 本页面为演示模板，产品与参数均为虚构</div>
</footer>

<script>
document.querySelectorAll('.dot').forEach(function(d){
  d.addEventListener('click',function(){
    document.querySelectorAll('.dot').forEach(function(x){x.classList.remove('on')});
    d.classList.add('on');
  });
});
</script>
</body>
</html>

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

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

关于作者

小蓝IT的头像

小蓝IT

394 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
云图帮助中心 FAQ 页面 HTML 单页源码
上一篇 9小时前
PulseBoard 营销数据仪表盘 HTML 单页源码
下一篇 9小时前

相关推荐

发表回复

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