元素周期表

宇宙中可见物质的 5%，由 118 种化学元素构成。而它们，现在可以在你的浏览器里以霓虹光效、玻璃拟态和 3D 电子轨道的形式，被触摸、旋转、探索。

Future Style Periodic Table 是一个完全运行在现代浏览器中的交互式元素周期表。它不是一张静态图表，而是一个融合了前沿前端技术与化学知识的沉浸式体验——深色背景、动态粒子、发光边框、热力图谱、可旋转的 3D 原子模型，全部开箱即用，无需安装任何依赖。

无论你是学生、教师、化学爱好者，还是前端开发者，都能从中获得知识或灵感。

核心特性

沉浸式视觉体验

• 赛博朋克美学：深色背景 + 动态网格粒子背景，营造未来科技氛围
• 霓虹分类高亮：10 大元素类别（如碱金属、卤素、稀有气体等）拥有专属配色，悬停时边框流光闪烁
• 全响应式设计：从 4K 桌面到手机横屏，布局自动适配，移动端提供操作提示

多维度数据可视化

• 热力图模式：一键切换显示原子半径、电负性、第一电离能、熔点、沸点等属性的色谱分布
• 分类筛选：点击图例即可高亮特定类别（如“过渡金属”或“镧系”），其余元素半透明淡化
• 实时搜索：支持通过元素符号（如 Fe）、中文名（铁）、英文名（Iron）或原子序数（26）快速定位

3D 原子结构模拟

• 点击任意元素，进入详情页，查看基于真实电子排布算法生成的 CSS 3D 轨道模型
• 支持鼠标拖拽或触屏滑动，360° 旋转观察电子层与轨道分布
• 详尽数据卡片：包含电子排布式、各层电子数、稳定同位素、常见化合价、发现年份等关键信息

所有 118 种元素数据均经过校验，覆盖 IUPAC 最新标准。

技术实现亮点

本项目采用 纯 Vanilla JavaScript（ES6+） 开发，零构建工具、零外部依赖，直接打开 index.html 即可运行。

项目未使用任何框架（如 React、Vue），也无需 Node.js 或本地服务器，是学习现代 CSS 与原生 JS 的优秀范例。

如何使用？

1. 下载项目

   git clone https://github.com/SeanWong17/Future-Style-Periodic-Table.git
   

   或直接下载 ZIP 压缩包。

2. 打开浏览器
   双击 index.html，或拖入 Chrome/Firefox/Edge 等现代浏览器中。
3. 开始探索
   • 悬停元素查看基础信息
   • 点击进入 3D 原子模型
   • 切换热力图观察元素性质趋势
   • 搜索“金”、“Au”或“79”快速定位

⚠️ 注意：部分老旧浏览器（如 IE）不支持 CSS 3D 或 Grid，建议使用 Chrome 90+ 或 Firefox 100+。

适合谁用？

• 学生：直观理解元素周期律与原子结构
• 教师：作为课堂演示工具，提升教学趣味性
• 科普创作者：嵌入网页或 PPT，增强内容表现力
• 前端开发者：学习纯 CSS 3D、Grid 布局与无框架交互设计

Future Style Periodic Table 证明了：科学可视化不必枯燥，前端技术也能成为知识传递的桥梁。它把抽象的化学概念，转化为可看、可动、可感的数字体验。