[分享] 纯原生 JS/CSS 写了一个「赛博朋克风」交互式元素周期表 (3D 模型/热力图/双语)
shuowang3708 · 19 小时 42 分钟前 · 710 次点击大家好，最近看到一个很有意思的视频灵感，一时手痒，用纯原生的 HTML/CSS/JS 写了一个赛博朋克风格的交互式元素周期表。
项目没有任何构建依赖，开箱即用。主打就是一个视觉效果和交互体验，包含 3D 原子结构模拟、多维度热力图等功能。
发出来给 V 友们图一乐，顺便求个 Star 🌟，也欢迎大家提提建议！
🔗 传送门
- 在线体验 (Live Demo): https://seanwong17.github.io/Future-Style-Periodic-Table/
- GitHub 源码: https://github.com/SeanWong17/Future-Style-Periodic-Table
✨ 主要玩法与特性
这个项目虽然只是个前端页面，但把化学书上的东西做得稍微酷炫了一点：
- 沉浸式视觉：深色赛博朋克风，配合霓虹光效和玻璃拟态（ Glassmorphism ），比传统的格子表耐看一些。
- **3D 原子结构 (CSS)**：点击任意元素进入详情页，可以看到基于 CSS 3D Transforms (
transform-style: preserve-3d) 渲染的原子模型。支持鼠标拖拽旋转，可以看到电子在轨道上跑。 - 多维度数据可视化：支持一键切换热力图模式。想看原子半径、电负性、熔沸点的分布？点击按钮，周期表会自动变成热力图色谱。
- 数据全：收录了 118 种元素，包含电子排布、同位素、化合价等详细数据。
- 双语支持：做了中英文切换，方便查阅。
📸 截图预览
周期表主界面
(建议配合深色模式食用)
热力图模式 (电负性分布)
3D 原子模型交互
 |
1
Tink PRO 牛，这个动画很棒
|
 |
2
bugcoder 19 小时 5 分钟前
太厉害了，这个效果可以。可惜高考以后把化学的知识都丢光了
|
 |
3
dianso 19 小时 1 分钟前
漂亮~
|
 |
4
jwenjian1210 17 小时 27 分钟前
很好看，已推荐
|
 |
5
shuowang3708 OP @Tink 感谢认可
|
|
6
shuowang3708 OP @bugcoder 谢谢
|
|
7
shuowang3708 OP @dianso 感谢
|
|
8
shuowang3708 OP @jwenjian1210 谢谢
|
 |
9
Seanfuck 16 小时 31 分钟前
很酷
|
 |
10
lneoi 14 小时 8 分钟前
不错不错
|
 |
11
QUIOA 13 小时 14 分钟前 via Android
太棒了吧
|
 |
12
leegradyllljjjj 13 小时 12 分钟前 via iPhone
牛 B 啊铁铁
|
 |
13
voy 9 小时 15 分钟前
google search: periodic table.
|
 |
14
Honye 3 小时 28 分钟前
粒子是扁平的，非球体。#13 楼推荐的好
|
 |
15
boyzhang 3 小时 7 分钟前
理科学的不错
|
 |
16
callv 2 小时 13 分钟前
这个站应该给化学老师看到👍
|
 |
17
zf07accp623 1 小时 26 分钟前
喜欢化学的程序员。
|
Select Language