![ScreenShot_2026-10-21_172936_918@2x.png](https://developer.qcloudimg.com/http-save/yehe-4450983/2fed0f0183eb999dd92c4e847b2a0827.png)
## 一、项目背景与目标

「神话神域」是一个全屏单页神话人物展示站，目标是在**不依赖后端和数据库**的前提下，做出电影级史诗展厅的沉浸感。最终收录 33 位中国神话人物，覆盖神界、仙界、魔界、妖界、灵界、冥界、佛界、龙界八类界域。

功能清单：



* 写实 CG 全身立绘 + 5s 图生视频动态；

* 八界域动态背景（云海、火焰、雷电、佛光、忘川等）随人物切换；

* 低沉男声 TTS 旁白 + 循环史诗配乐，自动巡游时等旁白读完再切换；

* 全息信息面板（简介 / 身份界域 / 神通 / 传说），悬停高亮、点击展开；

* 模糊搜索、键盘左右切换、缩略图直达；

* 侧边弹幕、带当前人物立绘的系统分享、全网分发；

* 备案信息、访问统计、意见反馈、前端防复制。

技术选型刻意保持轻量：**HTML + 内联 CSS + 原生 JavaScript + Tailwind CDN**，无框架、无构建、无后端，一个 HTML 文件配合 `assets/` 静态目录即可部署。



***
![ScreenShot_2026-10-21_171441_733@2x.png](https://developer.qcloudimg.com/http-save/yehe-4450983/9449523f2c6c7020a92f37fef7434a84.png)
## 二、整体架构



```
神话神域/
├── 神话神域.html          # 单文件 SPA（结构/样式/逻辑内联）
├── robots.txt
├── sitemap.xml
└── assets/
    ├── char/<id>.jpeg     # 33 张 2730×1536 横版全身立绘
    ├── video/<id>.mp4     # 33 条 1280×720 / 5s 图生视频
    ├── voice/<id>.mp3     # 33 条 TTS 旁白（zh-CN-YunjianNeural）
    └── bgm.mp3            # 循环史诗配乐
```

前端分层：



| 层    | 职责                                                     |
| ---- | ------------------------------------------------------ |
| 数据层  | `CHARACTERS` 数组内联全部人物字段（名称 / 称号 / 界域 / 能力 / 传说 / 媒体路径） |
| 状态层  | 普通对象 `state`（当前索引、是否自动巡游、当前界域），重渲染函数驱动                 |
| 视图层  | 立绘 / 视频、全息气泡、界域背景层、弹幕层、控制栏、分享 / 反馈弹层                   |
| 素材管线 | 离线批量生成图、视频、旁白，前端只做播放与切换                                |

因为是纯静态，所有 "动态" 都发生在浏览器端，服务端只负责发静态文件。



***
![ScreenShot_2026-10-21_172858_874@2x.png](https://developer.qcloudimg.com/http-save/yehe-4450983/1e2fa603a6f3bffd8b3cfeea2bf3fd48.png)
## 三、核心实现拆解

### 1. 状态管理与人物渲染

不用框架，用一个普通状态对象 + 一个 `renderCharacter()` 重渲染函数即可。切换时更新媒体、文本、界域主题和气泡内容：



```
const state = { index: 0, auto: false, realm: "神界" };

function renderCharacter(animatePop = true) {
  const c = CHARACTERS[state.index];
  el.portrait.src = c.img;                 // 静图兜底
  el.vid.src = `assets/video/${base}.mp4`;  // 图生视频
  el.vid.play().catch(() => {});
  el.nameCn.textContent = c.name;
  el.nameTitle.textContent = c.title;
  // ……填充气泡、标签、界域主题、同步 og 卡片
  switchRealm(c.realm[0]);
  playNarra(c.id);
}

function goto(i) {
  state.index = (i + CHARACTERS.length) % CHARACTERS.length;
  renderCharacter();
}
```

自动巡游不使用固定定时器切人，而是**监听旁白&#x20;**`ended`**&#x20;事件**后再 `goto(next)`，避免话没说完就切走：



```
narrator.addEventListener("ended", () => {
  if (state.auto) goto(state.index + 1);
});
```

### 2. 八界域主题切换

界域用 `body[data-realm]` 属性选择器驱动配色与装饰层，切换人物只改一个属性，CSS 负责呈现：



```
body[data-realm="神界"]   { --accent:#e8c26a; /* 神金 */ }
body[data-realm="冥界"]   { --accent:#8a7fb8; /* 幽紫冷青 */ }
body[data-realm="佛界"]   { --accent:#d9b86a; /* 金莲暖金 */ }
#realmLayer { /* 云海/火焰/雷电/佛光等装饰层，按界域显隐与动画 */ }
```

动态氛围用 Canvas 粒子 + CSS 动画实现：翻涌云海用多层渐变位移，雷电用随机折线游走，佛光用径向渐变呼吸，避免引入重型 WebGL 库。

### 3. 图生视频与 TTS 旁白（离线管线）

前端只播放，生成全部离线完成：



* **立绘**：统一重绘为 16:9（2730×1536）横版全身构图，避免非 16:9 显示器裁头脚；

* **动态**：以首帧立绘作为 `first_frame`，调用图生视频模型生成 5s、720p、h264 静音片段；

* **旁白**：edge-tts 选 `zh-CN-YunjianNeural`（低沉男声）逐人生成 mp3；

* 前端 `<video>` 静音循环，`<audio>` 播放旁白，配乐独立循环并做音量侧链避让。

### 4. 侧边弹幕（不遮挡主体）

弹幕不放全屏横穿，而是拆成左右两条边缘通道，从根本上避免遮挡中央神像：



```
#danmakuLayer { position: fixed; top:6%; height:20%; z-index:12; }
.dm-channel { position:absolute; top:0; bottom:0; width:26vw; overflow:hidden; }
#dmLeft { left:0; } #dmRight { right:0; }
@keyframes dmFlyL { from{transform:translateX(105%)} to{transform:translateX(-115%)} }
@keyframes dmFlyR { from{transform:translateX(-115%)} to{transform:translateX(105%)} }
```

合规过滤在前端拦截链接、联系方式与灌水，生产环境建议叠加服务端审核。

### 5. 带图分享（Web Share Level 2）

系统分享时把当前人物立绘抓取为 `File` 一并交给原生分享面板，不支持 `files` 的环境自动降级为文案 + 链接：



```
async function shareWithMedia(c, text, url) {
  const abs = new URL(c.img, location.href).href;
  const blob = await (await fetch(abs)).blob();
  const file = new File([blob], `${c.name}.jpeg`, { type: blob.type || "image/jpeg" });
  const base = { title: `神话神域 · ${c.name}`, text, url };
  if (navigator.canShare?.({ files: [file] })) {
    await navigator.share({ ...base, files: [file] });
  } else if (navigator.share) {
    await navigator.share(base);
  }
}
```

同时在切换人物时动态更新 `og:title / og:description / og:image`，让聊天 / 社交卡片展示当前人物。

### 6. SEO 与可发现性



* 语义化 `<main>`、单一 H1、Open Graph / Twitter Card / JSON-LD；

* `robots.txt` + `sitemap.xml`；

* 静态资源路径写在 `src` / CSS `url()`，保证发布链路扫描不裂图。

### 7. 免后端反馈与防复制

反馈用 `mailto:` 调起邮件客户端，正文自动带内容与来源页；前端防复制做了右键屏蔽、图片拖拽拦截、调试快捷键拦截（仅提高门槛，非绝对防盗）。



***

## 四、宝塔部署

纯静态无需建库，宝塔步骤：



1. 软件商店安装 Nginx，新建站点绑定域名 `shenhua.tengxiangtech.com`；

2. 把 `神话神域.html` 与 `assets/` 整体上传到站点根目录，设置默认首页；

3. 申请 Let's Encrypt 证书并强制 HTTPS；

4. 开启 gzip，对 `assets/` 内静态资源加长缓存；

5. 站长平台提交 sitemap。



***

## 五、效果与可扩展方向

线上已收录 33 位神祇，打开即有云雾显形的入场仪式，支持自动巡游、搜索、弹幕与带图分享。后续可扩展：



* 接入服务端表单 / 问卷替代 mailto，实现真实反馈收集；

* 增加人物关系图谱与时间线视图；

* 用 WebGL 替换 Canvas 粒子，提升八界域光影层次；

* 支持多语言与有声读物模式。

体验地址：[https://shenhua.tengxiangtech.com](https://shenhua.tengxiangtech.com)



***


前端、纯前端、单页应用、Canvas、图生视频、TTS、Web Share API、SEO、静态站、宝塔部署、国风、神话

「神话神域」是一个全屏单页神话人物展示站，目标是在不依赖后端和数据库的前提下，做出电影级史诗展厅的沉浸感。最终收录 33 位中国神话人物，覆盖神界、仙界、魔界、妖界、灵界、冥界、佛界、龙界八类界域。

零后端打造一座「数字神话神殿」：33 位神祇、八界域、图生视频与 TTS 旁白的纯前端实践

人工智能

「神话神域」纯前端单页沉浸式神话展厅，收录33位中国神祇，融合图生视频动态立绘、八界域主题特效、TTS旁白与WebShare带图分享，无后端依赖，一键部署宝塔，优化SEO可发现性，打造电影级国风史诗体验。

代码解释

JavaScript

数据库

Nginx

热销域名限时优惠，新客首年免费！


domain

2026上云采购 | AI焕新·智启新局

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

零后端打造一座「数字神话神殿」：33 位神祇、八界域、图生视频与 TTS 旁白的纯前端实践-腾讯云开发者社区-腾讯云

零后端打造一座「数字神话神殿」：33 位神祇、八界域、图生视频与 TTS 旁白的纯前端实践

零后端打造一座「数字神话神殿」：33 位神祇、八界域、图生视频与 TTS 旁白的纯前端实践

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐