SeanWong17/Future-Style-Periodic-Table

这是什么？

核心功能

• 01交互式周期表，收录全部 118 种元素，支持分类筛选与按符号、名称或原子序数搜索。
• 02热力图模式，可按电负性、熔点等属性为元素着色。
• 03简化的 3D 玻尔模型，可拖拽旋转，并支持全屏与滚轮缩放。
• 04详情卡片展示电子排布、同位素和常见化合价。
• 05支持中英文界面切换，并适配桌面与移动端布局。

适用场景

• 在化学课堂上讲解元素周期律与元素性质。
• 通过热力图直观比较不同元素的物理化学属性。
• 学习 CSS 3D 变换与 TypeScript + Vite 项目的组织方式。
• 使用 GitHub Pages 或 Docker 自行部署一个元素周期表网站。

快速上手

1. 1

   克隆项目

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

   进入项目目录

   cd Future-Style-Periodic-Table
3. 3

   安装依赖

   npm install
4. 4

   启动开发服务器，然后访问 http://localhost:5173/

   npm run dev

使用前须知

• !3D 原子模型是简化的玻尔模型可视化，仅用于教学演示，并非真实的电子云概率分布。

收录于专题

标签

常见问题

Future-Style-Periodic-Table 是什么？

赛博朋克风格的交互式元素周期表，涵盖 118 种元素，支持 3D 原子模型、热力图与中英文切换。 Future Style Periodic Table 是一个运行在浏览器中的交互式元素周期表，收录全部 118 种化学元素。页面采用深色赛博朋克风格，配有霓虹分类高亮与玻璃拟态面板。点击元素可查看原子序数、相对原子质量、电子排布、同位素和常见化合价等数据。

Future-Style-Periodic-Table 可以免费使用吗？用的什么许可证？

Future-Style-Periodic-Table 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。

Future-Style-Periodic-Table 还在维护吗？

活跃维护中。Future-Style-Periodic-Table 最近一次提交是在 2026年10月29日。

Future-Style-Periodic-Table 适合用来做什么？

在化学课堂上讲解元素周期律与元素性质。 通过热力图直观比较不同元素的物理化学属性。 学习 CSS 3D 变换与 TypeScript + Vite 项目的组织方式。 使用 GitHub Pages 或 Docker 自行部署一个元素周期表网站。

Future-Style-Periodic-Table 怎么安装和运行？

克隆项目: git clone https://github.com/SeanWong17/Future-Style-Periodic-Table.git 进入项目目录: cd Future-Style-Periodic-Table 安装依赖: npm install 启动开发服务器，然后访问 http://localhost:5173/: npm run dev

在哪里获取 Future-Style-Periodic-Table？

源代码和安装说明在 GitHub 上：https://github.com/SeanWong17/Future-Style-Periodic-Table