Aurora Coming Soon 倒计时页 HTML 单页源码

本源码是一款「即将上线」(Coming Soon) 倒计时单页模板，适合产品发布、网站改版或品牌活动前的预告页面。整体采用暖橙渐变背景搭配毛玻璃卡片设计，视觉上既有活力又不失高级感。

设计上最大的亮点是内置 JavaScript 倒计时器（天/时/分/秒），默认从打开页面起计算 30 天后上线；同时配有开发进度条、邮箱订阅表单与随机浮动的气泡粒子动画，让静态页面也能“活”起来。响应式布局确保在手机端同样美观。

适合独立开发者、设计师、创业团队在产品未正式发布前用作临时落地页；也适用于个人博客迁移、域名更换等需要“暂停营业”的场景。只需修改目标日期、文字内容与配色变量即可快速定制。

使用教程

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>即将上线 · Aurora 新站倒计时</title>
<style>
:root{--o1:#ff8a3d;--o2:#ff4e6a;--o3:#ffc24d;--txt:#2b1a12;--w:#fff;--line:rgba(255,255,255,.35)}
*{margin:0;padding:0;box-sizing:border-box}
body{min-height:100vh;font-family:"PingFang SC","Microsoft YaHei","Segoe UI",system-ui,sans-serif;
  background:linear-gradient(130deg,#ffd27a,#ff8a3d 42%,#ff4e6a 100%);
  background-size:220% 220%;animation:flow 18s ease infinite;color:var(--txt);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;position:relative;overflow-x:hidden}
@keyframes flow{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

/* 装饰气泡 */
.bub{position:fixed;border-radius:50%;background:rgba(255,255,255,.18);pointer-events:none;animation:rise linear infinite}
@keyframes rise{from{transform:translateY(20vh) scale(.6);opacity:0}20%{opacity:.9}to{transform:translateY(-110vh) scale(1.2);opacity:0}}

.card{position:relative;z-index:2;width:100%;max-width:760px;background:rgba(255,255,255,.20);
  border:1px solid var(--line);border-radius:26px;backdrop-filter:blur(18px);
  box-shadow:0 30px 70px rgba(120,40,10,.22);padding:52px 38px;text-align:center;color:#fff}

.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;letter-spacing:3px;font-size:15px;
  padding:9px 20px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.16);margin-bottom:30px}
.logo b{width:9px;height:9px;border-radius:50%;background:#fff;box-shadow:0 0 12px #fff}

h1{font-size:clamp(32px,6vw,56px);font-weight:900;line-height:1.15;letter-spacing:-1px;text-shadow:0 6px 26px rgba(120,40,10,.28)}
h1 em{font-style:normal;display:block;font-size:.52em;font-weight:600;letter-spacing:6px;opacity:.9;margin-top:14px}
.lead{max-width:520px;margin:22px auto 0;font-size:16.5px;line-height:1.85;color:rgba(255,255,255,.92)}

/* 倒计时 */
.count{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:40px auto 8px;max-width:560px}
.unit{background:rgba(255,255,255,.20);border:1px solid var(--line);border-radius:18px;padding:20px 8px;transition:.3s}
.unit:hover{transform:translateY(-5px);background:rgba(255,255,255,.30)}
.unit b{display:block;font-size:clamp(28px,6vw,44px);font-weight:900;line-height:1;font-variant-numeric:tabular-nums}
.unit span{display:block;margin-top:10px;font-size:12.5px;letter-spacing:3px;opacity:.85}

/* 进度 */
.prog{max-width:520px;margin:34px auto 0;text-align:left}
.prog .row{display:flex;justify-content:space-between;font-size:13.5px;opacity:.9;margin-bottom:8px}
.track{height:9px;border-radius:99px;background:rgba(255,255,255,.25);overflow:hidden}
.fill{height:100%;width:78%;border-radius:99px;background:linear-gradient(90deg,#fff,#ffe9c9);box-shadow:0 0 18px rgba(255,255,255,.7)}

/* 订阅 */
.sub{display:flex;gap:10px;max-width:480px;margin:36px auto 0;flex-wrap:wrap}
.sub input{flex:1;min-width:210px;padding:15px 18px;border:1px solid var(--line);border-radius:14px;
  background:rgba(255,255,255,.22);color:#fff;font-size:15px;outline:0}
.sub input::placeholder{color:rgba(255,255,255,.75)}
.sub input:focus{background:rgba(255,255,255,.32);border-color:#fff}
.sub button{padding:15px 30px;border:0;border-radius:14px;background:#fff;color:#e04a2f;font-weight:800;font-size:15px;cursor:pointer;transition:.25s;box-shadow:0 10px 26px rgba(120,40,10,.24)}
.sub button:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(120,40,10,.34)}
.tip{margin-top:14px;font-size:13px;opacity:.82}

.social{display:flex;gap:12px;justify-content:center;margin-top:36px}
.social a{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);
  background:rgba(255,255,255,.16);color:#fff;text-decoration:none;font-size:15px;font-weight:700;transition:.25s}
.social a:hover{background:#fff;color:#e04a2f;transform:translateY(-4px)}

footer{position:relative;z-index:2;margin-top:28px;color:rgba(255,255,255,.85);font-size:13px;text-align:center}
@media(max-width:520px){.count{grid-template-columns:repeat(2,1fr)}.card{padding:38px 22px}}
</style>
</head>
<body>

<div class="card">
  <div class="logo"><b></b>AURORA STUDIO</div>
  <h1>全新官网即将启航<em>COMING SOON</em></h1>
  <p class="lead">我们正在打磨最后的细节 —— 更快的加载、更清爽的排版、以及一整套全新的作品档案。留下邮箱，上线当天第一时间通知你。</p>

  <div class="count">
    <div class="unit"><b id="d">00</b><span>天</span></div>
    <div class="unit"><b id="h">00</b><span>时</span></div>
    <div class="unit"><b id="m">00</b><span>分</span></div>
    <div class="unit"><b id="s">00</b><span>秒</span></div>
  </div>

  <div class="prog">
    <div class="row"><span>开发进度</span><span>78%</span></div>
    <div class="track"><div class="fill"></div></div>
  </div>

  <form class="sub" onsubmit="return notify(event)">
    <input type="email" placeholder="输入你的邮箱地址" required>
    <button type="submit">通知我</button>
  </form>
  <div class="tip" id="tip">我们只在上线时发一封信，绝不打扰。</div>

  <div class="social">
    <a href="#" title="微博">微</a><a href="#" title="GitHub">Gh</a><a href="#" title="推特">X</a><a href="#" title="邮箱">@</a>
  </div>
</div>

<footer>© 2026 Aurora Studio · 用心做好每一个像素</footer>

<script>
// 目标时间：从打开页面算起 30 天后（可改成固定日期，如 new Date('2026-12-31T00:00:00')）
var target = new Date().getTime() + 30 * 24 * 3600 * 1000;
function pad(n){return n < 10 ? '0' + n : '' + n;}
function tick(){
  var left = target - new Date().getTime();
  if (left < 0) left = 0;
  var d = Math.floor(left / 86400000),
      h = Math.floor(left % 86400000 / 3600000),
      m = Math.floor(left % 3600000 / 60000),
      s = Math.floor(left % 60000 / 1000);
  document.getElementById('d').textContent = pad(d);
  document.getElementById('h').textContent = pad(h);
  document.getElementById('m').textContent = pad(m);
  document.getElementById('s').textContent = pad(s);
}
tick(); setInterval(tick, 1000);

function notify(e){
  e.preventDefault();
  document.getElementById('tip').textContent = '订阅成功！上线当天我们会第一时间提醒你 🎉';
  e.target.reset();
  return false;
}

// 生成气泡
for (var i = 0; i < 14; i++){
  var b = document.createElement('div');
  b.className = 'bub';
  var size = 12 + Math.random() * 70;
  b.style.width = b.style.height = size + 'px';
  b.style.left = (Math.random() * 100) + 'vw';
  b.style.bottom = '-120px';
  b.style.animationDuration = (12 + Math.random() * 16) + 's';
  b.style.animationDelay = (-Math.random() * 20) + 's';
  document.body.appendChild(b);
}
</script>

</body>
</html>

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