V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
shuowang3708
V2EX  ›  分享创造

[分享] 纯原生 JS/CSS 写了一个「赛博朋克风」交互式元素周期表 (3D 模型/热力图/双语)

  •  1
     
  •   shuowang3708 · 13 小时 39 分钟前 · 485 次点击

    大家好,最近看到一个很有意思的视频灵感,一时手痒,用纯原生的 HTML/CSS/JS 写了一个赛博朋克风格的交互式元素周期表

    项目没有任何构建依赖,开箱即用。主打就是一个视觉效果和交互体验,包含 3D 原子结构模拟多维度热力图等功能。

    发出来给 V 友们图一乐,顺便求个 Star 🌟,也欢迎大家提提建议!


    🔗 传送门


    ✨ 主要玩法与特性

    这个项目虽然只是个前端页面,但把化学书上的东西做得稍微酷炫了一点:

    1. 沉浸式视觉:深色赛博朋克风,配合霓虹光效和玻璃拟态( Glassmorphism ),比传统的格子表耐看一些。
    2. **3D 原子结构 (CSS)**:点击任意元素进入详情页,可以看到基于 CSS 3D Transforms (transform-style: preserve-3d) 渲染的原子模型。支持鼠标拖拽旋转,可以看到电子在轨道上跑。
    3. 多维度数据可视化:支持一键切换热力图模式。想看原子半径、电负性、熔沸点的分布?点击按钮,周期表会自动变成热力图色谱。
    4. 数据全:收录了 118 种元素,包含电子排布、同位素、化合价等详细数据。
    5. 双语支持:做了中英文切换,方便查阅。

    📸 截图预览

    周期表主界面 (建议配合深色模式食用) Overview

    热力图模式 (电负性分布) Heatmap

    3D 原子模型交互 3D Atom

    13 条回复    2026-02-02 03:25:29 +08:00
    Tink
        1
    Tink  
    PRO
       13 小时 19 分钟前
    牛,这个动画很棒
    bugcoder
        2
    bugcoder  
       13 小时 3 分钟前
    太厉害了,这个效果可以。可惜高考以后把化学的知识都丢光了
    dianso
        3
    dianso  
       12 小时 58 分钟前
    漂亮~
    jwenjian1210
        4
    jwenjian1210  
       11 小时 24 分钟前
    很好看,已推荐
    shuowang3708
        5
    shuowang3708  
    OP
       10 小时 31 分钟前
    @Tink 感谢认可
    shuowang3708
        6
    shuowang3708  
    OP
       10 小时 31 分钟前
    @bugcoder 谢谢
    shuowang3708
        7
    shuowang3708  
    OP
       10 小时 31 分钟前
    @dianso 感谢
    shuowang3708
        8
    shuowang3708  
    OP
       10 小时 31 分钟前
    @jwenjian1210 谢谢
    Seanfuck
        9
    Seanfuck  
       10 小时 28 分钟前
    很酷
    lneoi
        10
    lneoi  
       8 小时 5 分钟前
    不错不错
    QUIOA
        11
    QUIOA  
       7 小时 11 分钟前 via Android
    太棒了吧
    leegradyllljjjj
        12
    leegradyllljjjj  
       7 小时 9 分钟前 via iPhone
    牛 B 啊铁铁
    voy
        13
    voy  
       3 小时 12 分钟前
    google search: periodic table.
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   Solana   ·   903 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 22:38 · PVG 06:38 · LAX 14:38 · JFK 17:38
    ♥ Do have faith in what you're doing.