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

游戏新作预约官网 HTML 单页源码（霓虹橙红渐变 + 倒计时 + 角色阵容 + 票种配置）

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

为电子游戏新作打造的赛博预约官网，含预约进度、角色展示、配置需求与上线计划时间轴。

本源码是一款为电子游戏新作、大型 DLC 或独立游戏首发打造的「预约落地页」单页模板，采用深色背景 + 霓虹橙红渐变 + 网格暗纹，视觉风格凌厉、热血，非常契合动作 RPG、开放世界、二次元等类型的目标玩家。首屏直接抛出「裂境黎明」巨型发光标题，配合倒计时与预约进度条，将「稀缺感」与「参与感」同时拉满。

页面内容按玩家决策路径设计：四大可操控角色用渐变色块区分定位；六大核心玩法卡片解决战斗、探索、联机等高频疑问；最低/推荐双配置表格让玩家快速判断设备是否跑得动；上线计划时间轴则把技术测试、删档公测到正式发售的时间节点清晰呈现。预约卡内置档位选择、进度条与里程碑奖励提示，很适合作为社群裂变的承接页。

适合独立游戏工作室、游戏发行商、电竞赛事或众筹项目作为官网或预热页使用。替换游戏名、角色介绍、配置参数与预约奖励后即可上线，也可作为游戏行业作品集展示模板。

游戏新作预约官网 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>裂境黎明 · 新作预约</title>
<style>
:root{
  --bg:#0b0a10;
  --bg2:#141019;
  --ember:#ff5a1f;
  --ember2:#ffb020;
  --blood:#c81e3a;
  --ink:#f4efe8;
  --muted:#9a8f9f;
  --line:rgba(255,255,255,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}

/* nav */
.nav{position:sticky;top:0;z-index:50;background:rgba(11,10,16,.86);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav-in{max-width:1180px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:2px;font-size:18px}
.logo i{width:26px;height:26px;display:block;background:linear-gradient(135deg,var(--ember),var(--blood));clip-path:polygon(50% 0,100% 38%,82% 100%,18% 100%,0 38%)}
.nav ul{list-style:none;display:flex;gap:30px}
.nav a{color:var(--muted);text-decoration:none;font-size:14px;letter-spacing:1px;transition:.25s}
.nav a:hover{color:var(--ember2)}
.btn{
  display:inline-block;padding:12px 28px;border-radius:2px;font-weight:700;letter-spacing:2px;
  text-decoration:none;font-size:14px;border:none;cursor:pointer;transition:.25s;
}
.btn-main{background:linear-gradient(100deg,var(--ember),var(--blood));color:#fff;box-shadow:0 8px 26px rgba(255,90,31,.35)}
.btn-main:hover{transform:translateY(-2px);box-shadow:0 12px 34px rgba(255,90,31,.5)}
.btn-ghost{border:1px solid rgba(255,255,255,.25);color:var(--ink);background:transparent}
.btn-ghost:hover{border-color:var(--ember2);color:var(--ember2)}

/* hero */
.hero{position:relative;overflow:hidden;padding:96px 0 80px;
  background:
    radial-gradient(900px 460px at 78% 18%,rgba(255,90,31,.30),transparent 62%),
    radial-gradient(700px 420px at 10% 78%,rgba(200,30,58,.24),transparent 60%),
    var(--bg);
}
.hero:before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:64px 64px;mask-image:radial-gradient(70% 60% at 50% 40%,#000,transparent)}
.hero-grid{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}
.tag{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border:1px solid rgba(255,176,32,.4);
  border-radius:100px;font-size:12px;letter-spacing:3px;color:var(--ember2);background:rgba(255,176,32,.07)}
.tag span{width:6px;height:6px;border-radius:50%;background:var(--ember2);box-shadow:0 0 10px var(--ember2)}
h1.title{font-size:74px;line-height:1.02;font-weight:900;letter-spacing:4px;margin:22px 0 6px;
  background:linear-gradient(180deg,#fff 20%,#ffb98a 65%,var(--ember) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.sub-en{font-size:15px;letter-spacing:9px;color:var(--muted);margin-bottom:22px}
.hero p.lead{color:#cfc4cd;max-width:520px;font-size:16px}
.hero-cta{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.plat{display:flex;gap:22px;margin-top:30px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;letter-spacing:1px}
.plat b{color:var(--ink);display:block;font-size:15px;letter-spacing:0}

/* booking card */
.book{background:linear-gradient(165deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid var(--line);border-radius:6px;padding:30px;backdrop-filter:blur(6px)}
.book h3{font-size:15px;letter-spacing:3px;color:var(--ember2);margin-bottom:8px}
.count{display:flex;align-items:baseline;gap:8px;margin:14px 0 4px}
.count b{font-size:42px;font-weight:900;font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,#fff,var(--ember2));-webkit-background-clip:text;background-clip:text;color:transparent}
.count span{font-size:13px;color:var(--muted)}
.bar{height:8px;border-radius:100px;background:rgba(255,255,255,.08);overflow:hidden;margin:14px 0 10px}
.bar i{display:block;height:100%;width:76%;border-radius:100px;background:linear-gradient(90deg,var(--ember2),var(--ember),var(--blood))}
.milestones{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-bottom:22px}
.milestones em{font-style:normal;color:var(--ember2)}
.field{margin-bottom:12px}
.field input{width:100%;padding:13px 14px;background:rgba(0,0,0,.35);border:1px solid var(--line);
  border-radius:3px;color:var(--ink);font-size:14px;outline:none;transition:.2s;font-family:inherit}
.field input:focus{border-color:var(--ember)}
.field input::placeholder{color:#6e6474}
.book .btn{width:100%;text-align:center;margin-top:6px}
.book small{display:block;text-align:center;color:#6e6474;font-size:12px;margin-top:12px}

/* section */
section{padding:88px 0}
.sec-head{text-align:center;margin-bottom:52px}
.sec-head .kicker{font-size:12px;letter-spacing:6px;color:var(--ember);text-transform:uppercase}
.sec-head h2{font-size:38px;font-weight:900;letter-spacing:4px;margin-top:10px}

/* characters */
.chars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.char{position:relative;height:340px;border-radius:4px;overflow:hidden;border:1px solid var(--line);
  display:flex;align-items:flex-end;padding:22px;transition:.3s;cursor:pointer}
.char:hover{transform:translateY(-8px);border-color:rgba(255,176,32,.5)}
.char:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(6,5,9,.93))}
.c1{background:linear-gradient(150deg,#4a1024,#8f1f2f 55%,#c8462a)}
.c2{background:linear-gradient(150deg,#0f2a3d,#1b5670 55%,#3fa3b8)}
.c3{background:linear-gradient(150deg,#2a1a3f,#5b2c7a 55%,#a057c9)}
.c4{background:linear-gradient(150deg,#1e2b16,#3d5c22 55%,#8fa832)}
.char-txt{position:relative;z-index:2}
.char-txt em{font-style:normal;font-size:11px;letter-spacing:4px;color:var(--ember2)}
.char-txt h4{font-size:24px;font-weight:800;letter-spacing:3px;margin:6px 0 6px}
.char-txt p{font-size:13px;color:#bdb2bd;line-height:1.6}

/* features */
.feats{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{background:var(--bg2);border:1px solid var(--line);border-radius:4px;padding:32px 28px;transition:.3s}
.feat:hover{border-color:rgba(255,90,31,.45);background:#181322}
.feat .ic{width:48px;height:48px;border-radius:4px;display:grid;place-items:center;font-size:22px;margin-bottom:18px;
  background:linear-gradient(135deg,rgba(255,90,31,.22),rgba(200,30,58,.18));border:1px solid rgba(255,90,31,.3)}
.feat h4{font-size:19px;letter-spacing:1px;margin-bottom:10px}
.feat p{color:var(--muted);font-size:14px}

/* specs */
.specs{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.spec-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.spec-card{border:1px solid var(--line);border-radius:4px;padding:28px;background:rgba(0,0,0,.25)}
.spec-card h4{font-size:14px;letter-spacing:4px;margin-bottom:20px;color:var(--ember2)}
.spec-card.rec h4{color:#5ad1ff}
.spec-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px dashed rgba(255,255,255,.07);font-size:14px}
.spec-row:last-child{border:none}
.spec-row span{color:var(--muted)}
.spec-row b{font-weight:600}

/* timeline */
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;margin-top:20px}
.tl:before{content:"";position:absolute;top:13px;left:8%;right:8%;height:2px;background:linear-gradient(90deg,var(--ember),rgba(255,255,255,.12))}
.tl-item{text-align:center;position:relative;padding:0 12px}
.dot{width:28px;height:28px;border-radius:50%;margin:0 auto 18px;position:relative;z-index:2;
  background:var(--bg);border:2px solid rgba(255,255,255,.18);display:grid;place-items:center;font-size:12px}
.tl-item.on .dot{border-color:var(--ember);background:linear-gradient(135deg,var(--ember),var(--blood));box-shadow:0 0 0 6px rgba(255,90,31,.15)}
.tl-item em{font-style:normal;display:block;font-size:12px;letter-spacing:2px;color:var(--ember2);margin-bottom:6px}
.tl-item h5{font-size:16px;margin-bottom:6px}
.tl-item p{font-size:13px;color:var(--muted)}

/* cta */
.final{text-align:center;padding:96px 0;
  background:radial-gradient(700px 320px at 50% 20%,rgba(255,90,31,.24),transparent 65%),var(--bg2)}
.final h2{font-size:44px;font-weight:900;letter-spacing:5px;margin-bottom:14px}
.final p{color:var(--muted);margin-bottom:32px}

footer{border-top:1px solid var(--line);padding:34px 0;color:#6e6474;font-size:13px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px}
footer a{color:#6e6474;text-decoration:none;margin-left:20px}
footer a:hover{color:var(--ember2)}

@media(max-width:900px){
  .hero-grid,.spec-grid{grid-template-columns:1fr}
  .chars{grid-template-columns:repeat(2,1fr)}
  .feats{grid-template-columns:1fr}
  .tl{grid-template-columns:1fr 1fr;gap:34px 0}
  .tl:before{display:none}
  h1.title{font-size:48px}
  .nav ul{display:none}
}
</style>
</head>
<body>

<nav class="nav">
  <div class="nav-in">
    <div class="logo"><i></i>裂境黎明</div>
    <ul>
      <li><a href="#char">角色</a></li>
      <li><a href="#play">玩法</a></li>
      <li><a href="#spec">配置</a></li>
      <li><a href="#road">计划</a></li>
    </ul>
    <a href="#book" class="btn btn-main">立即预约</a>
  </div>
</nav>

<header class="hero">
  <div class="wrap hero-grid">
    <div>
      <div class="tag"><span></span>2026 年度开放世界动作 RPG</div>
      <h1 class="title">裂境黎明</h1>
      <div class="sub-en">R I F T &nbsp; O F &nbsp; D A W N</div>
      <p class="lead">在被裂隙吞噬的大陆上，你是最后一位持刃者。跨越六大风格迥异的区域，重构失落的秩序，与三十余种深渊造物正面交锋——每一次选择，都会改写世界的黎明。</p>
      <div class="hero-cta">
        <a href="#book" class="btn btn-main">预约领限定皮肤</a>
        <a href="#play" class="btn btn-ghost">观看实机演示</a>
      </div>
      <div class="plat">
        <div><b>PC / 主机 / 云游戏</b>全平台互通</div>
        <div><b>简中 / 繁中 / 英日韩</b>全语言配音</div>
        <div><b>买断制</b>无内购、无体力</div>
      </div>
    </div>

    <div class="book" id="book">
      <h3>全球预约</h3>
      <div class="count"><b>2,847,190</b><span>人已预约</span></div>
      <div class="bar"><i></i></div>
      <div class="milestones"><span>200 万 ✓</span><span>300 万 <em>解锁坐骑</em></span><span>500 万</span></div>
      <div class="field"><input type="text" placeholder="手机号 / 邮箱"></div>
      <div class="field"><input type="text" placeholder="游戏昵称（预留 ID）"></div>
      <a href="#" class="btn btn-main">锁定预约资格</a>
      <small>预约即送「灰烬持刃者」限定外观 + 首发七日双倍经验</small>
    </div>
  </div>
</header>

<section id="char">
  <div class="wrap">
    <div class="sec-head">
      <div class="kicker">Playable Characters</div>
      <h2>可操控角色</h2>
    </div>
    <div class="chars">
      <div class="char c1"><div class="char-txt"><em>近战 · 重击</em><h4>燼</h4><p>以炎刃斩开裂隙的流亡骑士，越受伤攻击越强。</p></div></div>
      <div class="char c2"><div class="char-txt"><em>远程 · 元素</em><h4>澪</h4><p>操控潮汐与冰霜的观星者，擅长控场与群体减速。</p></div></div>
      <div class="char c3"><div class="char-txt"><em>刺客 · 位移</em><h4>幻</h4><p>穿行于影界的暗行者，可短暂脱离时间流动。</p></div></div>
      <div class="char c4"><div class="char-txt"><em>辅助 · 召唤</em><h4>穀</h4><p>与森灵结契的守林人，召唤藤蔓构筑战场屏障。</p></div></div>
    </div>
  </div>
</section>

<section id="play" style="padding-top:0">
  <div class="wrap">
    <div class="sec-head">
      <div class="kicker">Core Gameplay</div>
      <h2>核心玩法</h2>
    </div>
    <div class="feats">
      <div class="feat"><div class="ic">⚔️</div><h4>无锁定连携战斗</h4><p>取消后摇、精准弹反、元素附着三层机制叠加，四名角色可在战斗中即时切换并触发连携技。</p></div>
      <div class="feat"><div class="ic">🌍</div><h4>六大无缝区域</h4><p>从熔岩裂谷到浮空遗迹，全程无加载切换。天气与昼夜会实际影响敌人强度与地形交互。</p></div>
      <div class="feat"><div class="ic">🧭</div><h4>分歧叙事</h4><p>主线设有 14 个关键抉择节点，共 5 种世界结局，NPC 阵营好感会永久改变可接任务。</p></div>
      <div class="feat"><div class="ic">🛠️</div><h4>装备重铸</h4><p>不刷数值刷词条：任意武器可迁移特效，让低级武器也能陪伴通关全程。</p></div>
      <div class="feat"><div class="ic">👥</div><h4>三人联机</h4><p>全流程支持随时加入 / 退出的联机模式，进度归主机、奖励人人有份。</p></div>
      <div class="feat"><div class="ic">🎧</div><h4>全平台存档互通</h4><p>PC 与主机、云游戏共享同一份云存档，通勤路上继续昨晚的旅程。</p></div>
    </div>
  </div>
</section>

<section class="specs" id="spec">
  <div class="wrap">
    <div class="sec-head">
      <div class="kicker">System Requirements</div>
      <h2>PC 配置需求</h2>
    </div>
    <div class="spec-grid">
      <div class="spec-card">
        <h4>最 低 配 置</h4>
        <div class="spec-row"><span>操作系统</span><b>Windows 10 64 位</b></div>
        <div class="spec-row"><span>处理器</span><b>i5-9400F / R5 3600</b></div>
        <div class="spec-row"><span>内存</span><b>16 GB</b></div>
        <div class="spec-row"><span>显卡</span><b>GTX 1660 6GB</b></div>
        <div class="spec-row"><span>存储</span><b>75 GB SSD</b></div>
        <div class="spec-row"><span>目标表现</span><b>1080P / 30 帧 / 中画质</b></div>
      </div>
      <div class="spec-card rec">
        <h4>推 荐 配 置</h4>
        <div class="spec-row"><span>操作系统</span><b>Windows 11 64 位</b></div>
        <div class="spec-row"><span>处理器</span><b>i7-12700K / R7 5800X3D</b></div>
        <div class="spec-row"><span>内存</span><b>32 GB</b></div>
        <div class="spec-row"><span>显卡</span><b>RTX 4070 12GB</b></div>
        <div class="spec-row"><span>存储</span><b>75 GB NVMe SSD</b></div>
        <div class="spec-row"><span>目标表现</span><b>2K / 60 帧 / 高画质</b></div>
      </div>
    </div>
  </div>
</section>

<section id="road">
  <div class="wrap">
    <div class="sec-head">
      <div class="kicker">Roadmap</div>
      <h2>上线计划</h2>
    </div>
    <div class="tl">
      <div class="tl-item on"><div class="dot">✓</div><em>已完成</em><h5>技术测试</h5><p>10 万玩家参与，采集 42 万条战斗反馈。</p></div>
      <div class="tl-item on"><div class="dot">✓</div><em>进行中</em><h5>全球预约</h5><p>累计里程碑解锁首发福利与限定外观。</p></div>
      <div class="tl-item"><div class="dot"></div><em>10 月</em><h5>删档公测</h5><p>开放前三大区域，全角色免费体验。</p></div>
      <div class="tl-item"><div class="dot"></div><em>12 月</em><h5>正式发售</h5><p>全平台同步上线，支持简中全程配音。</p></div>
    </div>
  </div>
</section>

<section class="final">
  <div class="wrap">
    <h2>黎明将至</h2>
    <p>现在预约，成为第一批踏入裂境的持刃者。</p>
    <a href="#book" class="btn btn-main" style="padding:16px 44px;font-size:15px">免费预约 · 领取限定外观</a>
  </div>
</section>

<div class="wrap">
  <footer>
    <div>© 2026 裂境黎明 Rift of Dawn · 本页面为演示模板，内容均为虚构</div>
    <div><a href="#">用户协议</a><a href="#">隐私政策</a><a href="#">媒体合作</a><a href="#">联系我们</a></div>
  </footer>
</div>

</body>
</html>

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

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

关于作者

小蓝IT的头像

小蓝IT

440 文章
12 评论
13 粉丝
13年建站经验，为用户提供企业、个人、博客网站搭建服务
电子音乐节 HTML 单页源码（霓虹紫青渐变 + 倒计时 + 三日通票）
上一篇 1天前
民宿预订详情 HTML 单页源码（木色 + 竹绿，含房型日历 + 周边地图 + 住客评价）
下一篇 9小时前

相关推荐

发表回复

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