Future Style Periodic Table

项目背景

这个项目最初来自一次很偶然的灵感。我在抖音上看到有人做了一个元素周期表展示项目，功能和视觉都比较原始，但这个方向本身很吸引我。因为我一直对化学比较感兴趣，也很喜欢元素周期表这种兼具科学结构和视觉秩序感的对象，所以希望在这个基础上做一个完成度更高、展示效果更强的交互式版本。

相比只做一个静态周期表，我更希望它像一个可以探索的化学科普界面：既有完整的元素数据，也有清晰的分类、热力图、搜索、详情卡片和 3D 原子结构展示。项目后续经历了多轮视觉和交互优化，也逐步补充了更可靠的数据来源、中英文双语支持和科学说明。

项目成果

• GitHub 开源项目，当前获得 480+ Stars、50+ Forks；在交互式元素周期表、3D 原子模型和化学科普可视化这一细分方向中，属于关注度较高的开源项目。
• 被阮一峰《科技爱好者周刊》第 383 期推荐，带来了更多真实用户访问和社区反馈。
• 提供在线 Demo，用户可以直接在浏览器中体验完整周期表、元素详情、热力图和 3D 原子模型。
• 项目采用 MIT License 开源，元素基础数据引用自公开开源数据源，并在 README 中保留来源和许可说明。

核心功能

• 元素周期表总览：使用 CSS Grid 绘制非规则周期表布局，覆盖 118 种化学元素。
• 沉浸式视觉设计：采用深色背景、霓虹色分类、玻璃拟态卡片和动效，强化科技感和可探索感。
• 多维度热力图：支持按原子半径、电负性、电离能、熔点、沸点等指标进行色谱映射。
• 元素详情卡片：展示原子序数、相对原子质量、电子排布、同位素、化合价、发现者等信息。
• 3D 原子结构模拟：基于电子排布渲染简化玻尔模型，支持拖拽旋转和放大查看。
• 中英文双语：支持中文 / 英文切换，提升项目对海外用户和开源社区的可读性。

我的工作

• 负责项目的整体设计、视觉风格、交互体验和前端实现，完成从灵感原型到可公开访问开源项目的主要开发工作。
• 设计周期表布局、元素分类配色、详情页结构、热力图模式和 3D 原子模型展示方式，持续把控项目审美和完成度。
• 整理并接入 118 种元素的基础数据、电子排布、同位素、化合价等信息，并在后续版本中切换到更可靠的公开数据源。
• 使用原生 HTML / CSS / JavaScript 实现完整应用，无需构建工具和后端环境，保证项目可以直接部署到 GitHub Pages。
• 根据社区反馈持续优化 README、国际化和界面细节；开源社区朋友对英文适配和翻译质量提出了帮助，也提醒我后续项目需要更早重视多语言体验。

技术实现

项目采用原生前端技术实现，重点不在复杂工程框架，而在数据组织、视觉呈现和交互细节。

• 布局系统：使用 CSS Grid 精确还原周期表的非规则二维结构，并适配不同屏幕尺寸。
• 数据驱动渲染：将元素基础数据、分类、颜色、热力图指标和详情信息组织为统一数据结构，通过 JavaScript 渲染界面。
• 交互状态管理：实现搜索、分类筛选、热力图切换、元素详情弹窗、语言切换等状态变化。
• CSS 3D 模型：通过 CSS 3D Transform 表达简化电子层和电子运动效果，用轻量方式增强科普展示感。
• 国际化支持：将界面文案和元素信息抽离为中英文映射，支持用户在浏览器中即时切换语言。

复盘

纯粹兴趣驱动的项目，从一个很小的灵感出发，经过设计、数据整理、前端实现和多轮打磨，慢慢做成了一个完成度还不错的作品。

做这个项目之后有一个比较明确的体会：开源项目不只是代码功能，视觉设计、README、数据来源说明、许可和国际化同样影响传播效果。社区朋友帮忙改进英文翻译这件事也提醒我，后续项目要更早考虑多语言用户的体验。