Anime.js3DData Viz
元素周期表
Anime.js 驱动的 3D 布局切换
在下方演示区域内直接操作（鼠标 / 键盘 / 滚动）。
全屏打开演示简介
化学元素周期表在表格、球体、螺旋、网格四种 3D 布局间平滑切换，点击元素可展开详情，是数据可视化 + 动效的典型案例。
收录日期 2026-03-13 · 来源 前端嘛 · Code Fun
技术栈
HTMLCSS 3DAnime.js
解析
布局 morph
每个元素卡片持有目标坐标，Anime.js 统一补间 transform，切换布局时形成「整体变形」而非简单淡入淡出。
信息密度
118 个元素同时动画对 GPU 有一定压力，适合桌面端；可作为学习 anime.js timeline 的范例。
应用场景
- ▸教育类科普站
- ▸数据可视化作品集
- ▸讲解 JS 动画库的教学 demo
完整源码
← 更多效果加载源码中…
请稍候…