微光 PixelGlow 独立游戏工作室官网 HTML 单页源码

这是一款面向独立游戏工作室、2–10 人小工作室、独立游戏开发者的品牌官网模板。整体采用近黑墨绿 + 翡翠青 + 琥珀黄的像素霓虹配色，传达出「小而美、有态度」的独立游戏气质，与大赛事页的冷调霓虹不同，更偏手工与温暖。首屏「用微光，点亮一方小世界」点题，配合加入我们 CTA。

页面结构为工作室官网的标准配置：首屏品牌主张 → 三款作品卡片（已发售 / 抢先体验 / 开发中，每款用 CSS 渐变 cover + 状态 pill）→ 三大创作理念（慢打磨 / 玩家共建 / 可持续）→ 团队成员网格（6 人）→ 招聘 CTA。作品状态用不同颜色 pill 区分，让访客一眼判断项目进度。

适合独立游戏工作室、独立开发者、Steam 发行团队、游戏原画师 / 设计师个人作品站，也适合独立游戏社区 / 同好会主页。替换工作室名、游戏名、团队成员与岗位信息后即可使用。

使用教程

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>微光 PixelGlow · 独立游戏工作室</title>
<style>
  :root{
    --bg:#06120f; --bg2:#0a1c17; --card:#0e241d; --line:#1c3a30;
    --em:#27e0a0; --em2:#19b6c9; --amber:#ffcf5c; --txt:#e7f5ef; --mut:#8fb3a6; --dim:#5d7d72;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:system-ui,"PingFang SC","Microsoft YaHei",sans-serif;background:var(--bg);color:var(--txt);line-height:1.7}
  a{color:inherit;text-decoration:none}
  .wrap{max-width:1140px;margin:0 auto;padding:0 24px}
  header{background:rgba(6,18,15,.86);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
  .nav{display:flex;align-items:center;justify-content:space-between;height:64px}
  .logo{font-weight:800;letter-spacing:1px;font-size:20px;color:var(--em)}
  .logo b{color:var(--amber)}
  .nav a{color:var(--mut);margin-left:26px;font-size:14px}
  .nav a:hover{color:var(--em)}
  .hero{padding:84px 0 70px;text-align:center;background:radial-gradient(820px 420px at 50% -20%,rgba(39,224,160,.16),transparent 60%),radial-gradient(680px 360px at 82% 8%,rgba(25,182,201,.13),transparent 60%)}
  .hero .tag{color:var(--amber);letter-spacing:5px;font-size:13px}
  .hero h1{font-size:52px;line-height:1.14;margin:14px 0;letter-spacing:1px}
  .hero h1 span{color:var(--em)}
  .hero p{color:var(--mut);max-width:560px;margin:0 auto 26px;font-size:16px}
  .btn{display:inline-block;background:linear-gradient(135deg,var(--em),var(--em2));color:#04130f;padding:14px 36px;border-radius:8px;font-weight:800;letter-spacing:1px}
  .btn.ghost{background:transparent;border:1px solid var(--em);color:var(--em);margin-left:12px}
  section{padding:66px 0}
  .tag{color:var(--em);letter-spacing:4px;font-size:13px;text-align:center}
  h2{font-size:31px;text-align:center;letter-spacing:1px;margin:8px 0 12px}
  .lead{color:var(--mut);text-align:center;max-width:620px;margin:0 auto}
  .games{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
  .g{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:.25s}
  .g:hover{transform:translateY(-6px);border-color:var(--em)}
  .g .cv{height:150px;background:linear-gradient(150deg,var(--em),var(--em2))}
  .g:nth-child(2) .cv{background:linear-gradient(150deg,var(--amber),var(--em))}
  .g:nth-child(3) .cv{background:linear-gradient(150deg,var(--em2),var(--em))}
  .g .body{padding:20px}
  .g h3{font-size:18px;color:var(--em)}
  .g .meta{color:var(--dim);font-size:12.5px;margin:4px 0 8px}
  .g p{color:var(--mut);font-size:13.5px}
  .pill{display:inline-block;margin-top:10px;font-size:12px;color:var(--amber);border:1px solid var(--line);border-radius:999px;padding:3px 12px}
  .values{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
  .v{background:var(--bg2);border:1px solid var(--line);border-radius:14px;padding:24px}
  .v h3{color:var(--em);font-size:17px;margin-bottom:6px}
  .v p{color:var(--mut);font-size:14px}
  .team{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
  .m{text-align:center}
  .m .av{width:64px;height:64px;border-radius:16px;margin:0 auto 10px;background:linear-gradient(135deg,var(--em),var(--amber))}
  .m h3{font-size:15px}
  .m p{color:var(--dim);font-size:12.5px}
  .cta{text-align:center;background:linear-gradient(160deg,var(--bg2),var(--bg));border-top:1px solid var(--line)}
  footer{border-top:1px solid var(--line);padding:28px 0;text-align:center;color:var(--dim);font-size:13px}
  @media(max-width:860px){.hero h1{font-size:36px}.games,.values{grid-template-columns:1fr}.team{grid-template-columns:1fr 1fr}.nav a{margin-left:14px;font-size:13px}}
</style>
</head>
<body>
<header><div class="wrap nav">
  <div class="logo">微光 <b>PixelGlow</b></div>
  <nav><a href="#games">作品</a><a href="#about">理念</a><a href="#team">团队</a><a href="#join">加入</a></nav>
</div></header>

<section class="hero"><div class="wrap">
  <div class="tag">INDIE GAME STUDIO</div>
  <h1>用<span>微光</span>，<br>点亮一方小世界</h1>
  <p>我们是一间六人独立游戏工作室，相信好游戏不靠堆量，而靠一个让人记住的瞬间。</p>
  <a class="btn" href="#games">看看我们的游戏</a><a class="btn ghost" href="#join">加入我们</a>
</div></section>

<section id="games"><div class="wrap">
  <div class="tag">OUR GAMES</div>
  <h2>已发售与开发中</h2>
  <div class="lead">从治愈到烧脑，每一款都来自一次真实的创作冲动。</div>
  <div class="games">
    <div class="g"><div class="cv"></div><div class="body"><h3>萤火小径</h3><div class="meta">治愈 · 解谜 · PC/Switch</div><p>提一盏灯，在会发光的森林里找回走散的星星。</p><span class="pill">已发售</span></div></div>
    <div class="g"><div class="cv"></div><div class="body"><h3>齿轮城</h3><div class="meta">模拟经营 · PC</div><p>重建一座靠蒸汽与友谊运转的空中城市。</p><span class="pill">抢先体验</span></div></div>
    <div class="g"><div class="cv"></div><div class="body"><h3>深海回声</h3><div class="meta">叙事冒险 · 开发中</div><p>潜入无声海底，用声波与远古生物对话。</p><span class="pill">2026 待定</span></div></div>
  </div>
</div></section>

<section id="about" style="background:var(--bg2)"><div class="wrap">
  <div class="tag">WHAT WE BELIEVE</div>
  <h2>我们怎么做事</h2>
  <div class="values">
    <div class="v"><h3>小团队，慢打磨</h3><p>宁可做精一款，也不量产十款。每个机制都要好玩到舍不得删。</p></div>
    <div class="v"><h3>玩家共建</h3><p>demo 阶段就开放社区，关卡与剧情很大程度由玩家共同决定。</p></div>
    <div class="v"><h3>可持续创作</h3><p>不加班、不画饼，让团队长期保持对游戏本身的热爱。</p></div>
  </div>
</div></section>

<section id="team"><div class="wrap">
  <div class="tag">THE TEAM</div>
  <h2>六个人，六种热爱</h2>
  <div class="team">
    <div class="m"><div class="av"></div><h3>阿野</h3><p>主创 / 设计</p></div>
    <div class="m"><div class="av"></div><h3>小满</h3><p>程序</p></div>
    <div class="m"><div class="av"></div><h3>桐桐</h3><p>美术</p></div>
    <div class="m"><div class="av"></div><h3>老周</h3><p>音频</p></div>
    <div class="m"><div class="av"></div><h3>柚子</h3><p>叙事</p></div>
    <div class="m"><div class="av"></div><h3>KK</h3><p>发行</p></div>
  </div>
</div></section>

<section class="cta" id="join"><div class="wrap">
  <div class="tag">WE ARE HIRING</div>
  <h2>想和我们一起做游戏？</h2>
  <p class="lead" style="margin:0 auto 24px">我们在找热爱独立游戏的程序、美术与关卡设计，远程也欢迎。</p>
  <a class="btn" href="#">查看在招岗位</a>
</div></section>

<footer>© 2026 微光 PixelGlow 独立游戏工作室 · 小，但发光</footer>
</body>
</html>

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