这是一个创建于 79 天前的主题，其中的信息可能已经有所发展或是发生改变。
大家好，最近看到一个很有意思的视频灵感，一时手痒，用纯原生的 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 2 月 1 日 太厉害了，这个效果可以。可惜高考以后把化学的知识都丢光了 |
 | 3 dianso 2 月 1 日 漂亮~ |
 | 4 jwenjian1210 2 月 1 日 很好看，已推荐 |
 | 5 shuowang3708 OP @Tink 感谢认可 |
| 6 shuowang3708 OP @bugcoder 谢谢 |
| 7 shuowang3708 OP @dianso 感谢 |
8 shuowang3708 OP @jwenjian1210 谢谢 |
 | 9 Seanfuck 2 月 1 日 很酷 |
 | 10 lneoi 2 月 1 日 不错不错 |
 | 11 QUIOA 2 月 1 日 via Android 太棒了吧 |
 | 12 leegradyllljjjj 2 月 1 日 via iPhone 牛 B 啊铁铁 |
 | 13 voy 2 月 2 日 google search: periodic table. |
 | 14 Honye 2 月 2 日 粒子是扁平的，非球体。#13 楼推荐的好 |
 | 15 boyzhang 2 月 2 日 理科学的不错 |
 | 16 callv 2 月 2 日 这个站应该给化学老师看到 |
 | 17 zf07accp623 2 月 2 日 喜欢化学的程序员。 |
 | 18 JoryJoestar 2 月 2 日 打开元素详情，右上角的关闭按钮 hover 状态，关闭图标有点歪了 |
 | 19 clandyuki 2 月 3 日 很漂亮 |
Select Language