我想看看原子长什么样，于是做了个元素周期表

一张表，118 个宇宙

元素周期表是人类最伟大的发明之一。

1869 年，门捷列夫把 63 种元素写在卡片上，摆弄了好几天，发现它们可以按照原子量排成一个有规律的表格。他甚至在表里留了空位，预言了当时还没发现的元素——后来全说对了。

一张表格，预言了宇宙的构成。

157 年后的今天，118 个元素已经全部被发现。它们构成了你看到的一切——你呼吸的空气、脚下的土地、手机里的芯片、你身体里的每一个原子。

但我从来没「见过」原子。

化学课的遗憾

高中化学课上，老师在黑板上画了一个圆，说「这是原子，中间是原子核，外面是电子轨道」。

然后画了几个椭圆，说「电子沿着这些轨道转」。

我盯着那个图看了很久，总觉得哪里不对——电子真的是这样转的吗？

后来才知道，电子根本不「转」。它们以概率云的形式存在于原子核周围，没有确定的轨道，只有出现概率的分布。但这些内容太抽象了，课本上画不出来，老师也讲不清楚。

如果当时有一个工具，能让我把原子转来转去、放大缩小、从各个角度看清楚，也许我会更喜欢化学。

所以我自己做了一个。

做了什么

项目叫「元素周期表」，是一个交互式的 3D 元素周期表网页应用。

118 个元素，一个不少。 从氢（H）到鿫（Og），全部收录。每个元素卡片显示原子序数、符号、原子质量，用颜色区分分类——碱金属是暖色、卤素是冷色、稀有气体是紫色。

点击任意元素，弹出详情面板：

中英文名称（Hydrogen / 氢）
原子质量、发现年份
电子排布和电子层结构
元素简介

但这些都不是重点。

重点是 3D 原子模型。

两种看原子的方式

用 Three.js 做了两种 3D 视图。

玻尔模型

这是最经典的原子模型——原子核在中间，电子沿着轨道环一圈一圈地转。

点开氢原子，你会看到一个质子和一个电子在转圈。点开铀原子，92 个电子铺满好几层轨道，密密麻麻的，壮观。

拖拽可以旋转角度，滚轮可以缩放。看着电子绕着原子核转，莫名有种解压的感觉。

轨道模型

这是更科学的可视化方式。

s 轨道是球形的，像一个透明的泡泡包裹着原子核。p 轨道是哑铃形的，两个球体沿轴线分布。d 轨道是花瓣形的，四个瓣均匀展开。f 轨道更复杂，像是绽放的花朵。

用透明玻璃材质渲染，每个轨道都泛着淡淡的蓝光。拖拽旋转的时候，光线在轨道表面流动，像一个个发光的泡泡漂浮在空间里。

化学课上老师画的轨道图总是让人头大，但 3D 转起来之后突然就理解了。

两种模式一键切换。想看经典模型还是量子模型，随你。

布局的挑战

元素周期表的布局比想象中复杂得多。

标准的 18 列网格，但镧系元素（57-71）和锕系元素（89-103）要单独排在下面，因为它们在周期表里的位置放不下。

用 CSS Grid 搞定的。每个元素卡片都是一个透明玻璃方块，悬停时微微浮起、光晕增强。整个表看起来像一块精密的科学仪器面板。

调响应式布局的时候，768px 断点和 480 断点各调了一遍。在手机上看周期表，元素卡片会自动缩小，但信息不会丢失。好的设计应该适应屏幕，而不是让屏幕适应设计。

和化学实验室的关系

这个项目和之前做的「化学实验室」是配套的。

周期表负责「元素是什么」，化学实验室负责「元素之间怎么反应」。从周期表页面可以直接跳转到化学实验室，反过来也行。

就像查字典和写作文的关系——一个帮你认字，一个帮你造句。

两个项目加起来，基本上覆盖了高中化学的核心内容。如果当年有这些工具，我可能就不会在元素符号默写时把 Au 写成 Ag 了。

技术实现

和化学实验室一样，这个项目也是纯前端实现：

HTML + CSS + JavaScript，零依赖
Three.js，从 CDN 引入，用于 3D 原子渲染
CSS Grid，18 列周期表布局
LocalStorage，主题和语言偏好持久化
全部数据内嵌，118 个元素的完整数据

script.js 大约 969 行，styles.css 大约 651 行。没有打包工具，打开 index.html 就能跑。

界面设计延续了化学实验室的 Apple Liquid Glass 风格——超透明玻璃面板、微妙的折射效果、深浅主题平滑切换。

写在最后

这个项目做完之后，我重新看了一遍元素周期表。

以前觉得这只是一张需要背的表格，现在觉得它是一张地图——一张宇宙构成的地图。每一个元素都有自己的故事，有的在恒星核心诞生，有的在超新星爆发中形成，有的在实验室里被人工合成。

而我能做的，就是让这些故事被更多人看到。

如果你对化学好奇，或者想看看原子到底长什么样，欢迎来玩。

GitHub：https://github.com/Enco-shark/element_web
在线体验：https://enco-shark.github.io/element_web/

118 个元素，118 个故事。每一个原子，都是宇宙写给你的情书 ⚛️

Enco的小站