3D 交互式元素周期表：基于 CSS Grid 与原生 JavaScript 的数据可视化项目

Future Style Periodic Table 是一个运行于现代浏览器的交互式化学元素周期表。不同于传统的静态图表，本项目采用深色赛博朋克（Cyberpunk）风格，融合霓虹光效、玻璃拟态（Glassmorphism）与流畅的交互动画，重新定义化学元素的视觉呈现。

项目涵盖全部 118 种化学元素，包含原子序数、相对原子质量、电子排布、同位素、化合价等详尽数据，并支持多维度热力图可视化与 3D 原子结构模拟，是学习化学知识与探索前端技术的绝佳实践。

🌟 亮点： 点击任意元素，即可进入沉浸式详情页，拖拽旋转 3D 原子模型，感受电子云的轨道之美。支持中英文双语切换，满足全球用户需求。

• 赛博朋克美学：深色背景搭配动态网格粒子，营造科技感十足的沉浸氛围。
• 霓虹分类高亮：10 大元素分类采用独特配色，悬停时边框发光流转。
• 全响应式适配：从 4K 桌面到移动端，均有优雅的布局表现（含横屏提示）。
• 双语支持：一键切换中文/英文界面，满足不同语言用户的需求。

• 热力图模式：一键切换原子半径、电负性、电离能、熔点、沸点的色谱分布。
• 分类筛选：点击图例即可高亮特定类别（碱金属、稀有气体、镧系/锕系等）。
• 实时搜索：支持通过元素符号、中英文名称或原子序数快速定位。

• CSS 3D 轨道模型：基于电子排布算法实时渲染电子层与旋转电子。
• 手势交互：支持鼠标拖拽 / 触屏滑动，360° 旋转观察原子结构。
• 详尽数据卡片：展示电子排布式、分层电子数、同位素稳定性、常见化合价等。

本项目采用 Vanilla JavaScript (ES6+) 开发，零构建依赖，开箱即用。

• 📐 CSS Grid：精确绘制非规则的周期表网格布局。
• 🎭 CSS 3D Transforms：transform-style: preserve-3d 实现电子轨道旋转。
• 🎨 CSS Variables：主题颜色统一管理，便于自定义。
• 📱 Responsive Design：多断点媒体查询，适配各类屏幕尺寸。

项目采用扁平化结构，所有数据通过 JS 变量内嵌，无需后端环境。

Future-Style-Periodic-Table/
├── screenshots/         # 预览截图
│   ├── overview.png     # 周期表总览
│   ├── heatmap.png      # 热力图模式
│   ├── detail.png       # 元素详情卡片
│   └── atom3d.png       # 3D 原子模型
├── data.js              # 数据文件
├── index.html           # 入口文件
├── main.js              # 逻辑代码
├── styles.css           # 样式文件
├── README.md            # 项目说明
├── README_en.md         # 项目说明（英文版）
└── LICENSE              # MIT 开源协议

得益于纯静态网页设计，本项目具有极佳的便携性：

1. 下载：Clone 或下载本项目压缩包。
2. 运行：直接用浏览器打开 index.html 即可。
3. 注意：无需安装 Node.js，无需配置本地服务器，开箱即用。