热血传奇 - 官方网站

一个基于 Vite 构建的热血传奇游戏官方网站项目，采用复古传奇风格设计，展示游戏特色、职业介绍、宠物系统、游戏截图和新闻公告等内容。

• 英雄区域 - 震撼的游戏标题展示，带有动态粒子效果和服务器状态显示
• 游戏特色 - 展示六大核心游戏玩法特色
• 职业介绍 - 战士、法师、道士三大经典职业详细介绍
• 宠物系统 - 展示六种不同稀有度等级的战斗宠物及其技能
• 游戏截图 - 精选游戏实景截图，支持灯箱放大查看
• 新闻公告 - 支持标签分类筛选的新闻列表

• 平滑滚动导航与锚点高亮
• 元素入场滚动动画（Intersection Observer）
• 宠物属性条动态填充动画
• 英雄区文字打字机效果
• 在线人数实时动态更新
• 背景漂浮粒子效果
• 图片灯箱查看功能

• 右下角悬浮福利广告
• 左下角在线客服入口
• 侧边栏快捷功能导航
• 新服开启弹窗广告
• 顶部公告横幅
• 中间闪烁快捷按钮

• 构建工具: Vite 5.x
• 前端技术: 原生 HTML5 + CSS3 + JavaScript (ES6+)
• 字体: Noto Serif SC（思源宋体）
• 图标: Font Awesome 6.4.0
• 动画: CSS3 动画 + Intersection Observer API

.
├── index.html          # 主页面结构
├── main.js             # 交互逻辑脚本
├── style.css           # 样式文件
├── package.json        # 项目配置
├── vite.config.js      # Vite 配置
├── public/             # 静态资源目录
│   └── images/         # 游戏截图等图片资源
└── README.md           # 项目说明

npm install

npm run dev

npm run build

构建后的文件将输出到 dist 目录。

编辑 index.html 中的相关内容：

• 游戏标题：修改 <title> 和 .logo-text
• 服务器状态：修改 .server-status 区域
• 新闻公告：修改 .news-list 中的条目

编辑 style.css 中的 CSS 变量：

:root {
  --primary: #d4af37;      /* 主色调 - 金色 */
  --secondary: #c41e3a;    /* 次色调 - 红色 */
  --dark: #1a1a2e;         /* 深色背景 */
  /* ... */
}

• Chrome 80+
• Firefox 75+
• Safari 13+
• Edge 80+

MIT License

本项目通过 CNB Cool Web Builder 创建。