44 lines
3.2 KiB
Markdown
44 lines
3.2 KiB
Markdown
|
**角色设定：**
|
|||
|
|
你是一位获得过 Awwwards 年度提名的资深前端创意工程师，精通 WebGL、Three.js、GSAP 动画库以及现代 CSS 布局技术。你擅长将视觉冲击力与严谨的代码逻辑完美结合。
|
|||
|
|
|
|||
|
|
**任务目标：**
|
|||
|
|
请创建一个单文件 HTML 解决方案（包含 HTML, CSS, JavaScript），构建一个名为 **“CYBER-TEMPLE: 赛博神庙”** 的沉浸式网站。
|
|||
|
|
|
|||
|
|
**主题背景：**
|
|||
|
|
网站展示了一个存在于虚拟网络空间中的“古代神庙”，它由流动的数据代码构成，是人工智能意识的诞生地。用户将以“探索者”的身份，通过滚动和交互揭开神庙的神秘面纱。
|
|||
|
|
|
|||
|
|
**功能与技术要求（必须严格执行）：**
|
|||
|
|
|
|||
|
|
1. **核心技术栈：**
|
|||
|
|
* 原生 HTML5, CSS3, JavaScript (ES6+)。
|
|||
|
|
* **必须引入 Three.js (通过 CDN)** 用于构建核心 3D 场景。
|
|||
|
|
* 允许引入 GSAP (通过 CDN) 用于处理复杂的补间动画和 ScrollTrigger 滚动触发。
|
|||
|
|
|
|||
|
|
2. **3D 场景构建：**
|
|||
|
|
* 创建一个核心物体：**“数据方尖碑”**（一个悬浮的、不断形变的二十面体）。
|
|||
|
|
* 材质必须是**线框模式**与**全息玻璃材质**的结合，带有发光边缘。
|
|||
|
|
* 背景必须有**粒子星空系统**，粒子会对鼠标移动产生轻微的视差排斥效果。
|
|||
|
|
|
|||
|
|
3. **视觉与 UI 设计：**
|
|||
|
|
* **配色方案：** 深黑背景 (`#050505`) 搭配 霓虹青 (`#00f3ff`) 和 电光紫 (`#bc13fe`) 的高饱和度点缀。
|
|||
|
|
* **排版：** 标题使用巨大的、带有故障效果的单宽字体；正文清晰易读。
|
|||
|
|
* **风格：** 结合“玻璃拟态”与“HUD（抬头显示）”风格，UI 元素看起来像是悬浮在屏幕上的全息投影。
|
|||
|
|
|
|||
|
|
4. **交互设计：**
|
|||
|
|
* **滚动驱动动画：** 随着用户向下滚动，3D 方尖碑应该旋转、拆解、重组，颜色从冷色调逐渐变为警示性的红色调。
|
|||
|
|
* **自定义光标：** 隐藏默认鼠标，使用一个带有反向运动（Lag效果）的圆环光标，点击时会有扩散波纹。
|
|||
|
|
* **音频可视化（模拟）：** 在页面底部添加一个“连接系统”按钮，点击后触发模拟的音频频谱跳动动画（使用 CSS 动画或 Canvas 绘制，无需真实音频输入）。
|
|||
|
|
|
|||
|
|
5. **内容板块规划（至少包含 4 个 Section）：**
|
|||
|
|
* **Hero Section：** 巨大的标题“SYSTEM AWAKENING”，伴随打字机效果。
|
|||
|
|
* **Manifesto Section（宣言）：** 介绍神庙的由来，文字卡片随滚动交错滑入。
|
|||
|
|
* **Data Core Section（核心数据）：** 展示三个动态增长的进度圆环，展示算力、存储、同步率。
|
|||
|
|
* **Terminal Section（终端）：** 一个模拟的黑底绿字命令行窗口，自动滚动输出神秘的日志代码。
|
|||
|
|
|
|||
|
|
6. **性能与代码质量：**
|
|||
|
|
* 代码必须有清晰的注释，分块编写（Config, Init, Animate, Events）。
|
|||
|
|
* 考虑响应式设计，确保在移动端 3D 物体不会遮挡文字，布局会自动折叠。
|
|||
|
|
|
|||
|
|
**最终输出：**
|
|||
|
|
请提供完整的、可直接运行的 HTML 代码。不要使用任何需要构建工具（如 Webpack/Vite）的框架，一切都在浏览器原生环境中运行。
|