HTML元素周期表

发布于：2025-09-04 ⋅ 阅读:(20) ⋅ 点赞:(0)

image-20250903210544187

写在前面

用HTML、CSS与JavaScript构建一个可交互的三维元素周期表，让化学之美在浏览器中跃然呈现。

系列文章

序号 目录
1 HTML满屏跳动的爱心
2 HTML五彩缤纷的爱心
3 HTML满屏漂浮爱心
4 HTML情人节爱心
5 HTML蓝色爱心射线
6 HTML跳动的爱心
7 HTML跳动的双爱心
8 HTML粒子爱心
9 HTML蓝色动态爱心
10 HTML橙色动态粒子爱心
11 HTML旋转爱心
12 HTML爱情树
13 HTML元素周期表
14 HTML飞舞的花瓣
15 HTML星空特效
16 HTML黑客帝国字母雨
17 HTML哆啦A梦
18 HTML流星雨
19 HTML沙漏爱心
20 HTML爱心字母雨
21 HTML爱心流星雨
22 HTML生日蛋糕
23 HTML流光爱心
24 HTML粉色爱心
25 HTML满屏飘字
26 HTML飞舞爱心
27 HTML音乐圣诞树
28 HTML星空圣诞树
29 HTML礼物圣诞树
30 HTML旋转圣诞树
31 HTML旋转相册①
32 HTML旋转相册②
33 HTML旋转相册③
34 HTML大雪纷飞①
35 HTML大雪纷飞②
36 HTML炫酷烟花①
37 HTML炫酷烟花②
38 HTML炫酷烟花③
39 HTML炫酷烟花④
40 HTML炫酷烟花⑤
41 HTML炫酷烟花⑥
42 HTML炫酷烟花⑦
43 HTML炫酷烟花⑧
44 HTML炫酷烟花⑨
45 HTML金色流星雨
敬请期待……

技术需求

  1. Three.js核心架构
  • 场景与相机：使用PerspectiveCamera创建具有景深效果的三维视角，结合Scene容器组织所有元素，构建立体空间感。
  • CSS3D渲染器：通过CSS3DRenderer将DOM元素作为三维对象渲染，实现轻量级且兼容性良好的3D视觉效果，避免WebGL复杂着色器编写。
  • 动画循环：利用requestAnimationFrame持续驱动动画帧更新，确保交互流畅自然。
  1. 交互与控制机制
  • 轨道控制器：引入TrackballControls实现鼠标拖拽旋转、缩放与平移功能，提升用户探索自由度。
  • 响应式设计：监听窗口大小变化，动态调整相机比例和渲染器尺寸，适配不同屏幕设备。
  1. 布局与变换系统
  • 多形态布局：预设“表格”“球体”“螺旋”“网格”四种空间排列模式，每种布局通过数学公式精确计算各元素位置。
  • 缓动动画：借助TWEEN.js实现元素在不同布局间平滑过渡，采用指数缓动（Exponential.InOut）增强视觉张力与节奏感。
  1. 数据结构与对象管理
  • 周期表数据建模：将元素符号、名称、原子量、族、周期等信息以线性数组存储，通过步长5遍历提取，结构清晰高效。
  • 对象封装：为每个元素创建独立的CSS3DObject，并维护其在不同状态下的目标位置数组，便于动画调度。
  1. 视觉样式与用户体验
  • 动态背景与光影：黑色背景凸显科技感，元素卡片采用青蓝色辉光与边框，模拟未来主义UI风格。
  • 悬停反馈：利用CSS:hover增强交互提示，光晕扩大与边框高亮提升可操作性。
  • 按钮导航：底部固定菜单提供一键切换布局功能，按钮具备清晰的状态反馈，提升操作直觉性。
  1. 性能优化策略
  • 批量动画管理：使用TWEEN.removeAll()防止动画叠加，避免内存泄漏与卡顿。
  • 分层渲染：仅在必要时调用render()，通过事件监听减少无效重绘，保障运行效率。

主要代码

创作不易，订阅后可查看完整代码

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <title>periodic table of elements</title>
  <style>
    html,
    body {
      height: 100%;
    }
 
    body {
      background-color: #000000;
      margin: 0;
      font-family: Helvetica, sans-serif;
      ;
      overflow: hidden;
    }
 
    a {
      color: #ffffff;
    }
 
    #info {
      position: absolute;
      width: 100%;
      color: #ffffff;
      padding: 5px;
      font-family: Monospace;
      font-size: 13px;
      font-weight: bold;
      text-align: center;
      z-index: 1;
    }
 
    #menu {
      position: absolute;
      bottom: 20px;
      width: 100%;
      text-align: center;
    }
 
    .element {
      width: 120px;
      height: 160px;
      box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.5);
      border: 1px solid rgba(127, 255, 255, 0.25);
      text-align: center;
      cursor: default;
    }
 
    .element:hover {
      box-shadow: 0px 0px 12px rgba(0, 255, 255, 0.75);
      border: 1px solid rgba(127, 255, 255, 0.75);
    }
 
    .element .number {
      position: absolute;
      top: 20px;
      right: 20px;
      font-size: 12px;
      color: rgba(127, 255, 255, 0.75);
    }
 
    .element .symbol {
      position: absolute;
      top: 40px;
      left: 0px;
      right: 0px;
      font-size: 60px;
      font-weight: bold;
      color: rgba(255, 255, 255, 0.75);
      text-shadow: 0 0 10px rgba(0, 255, 255, 0.95);
    }
 
    .element .details {
      position: absolute;
      bottom: 15px;
      left: 0px;
      right: 0px;
      font-size: 12px;
      color: rgba(127, 255, 255, 0.75);
    }
 
    button {
      color: rgba(127, 255, 255, 0.75);
      background: transparent;
      outline: 1px solid rgba(127, 255, 255, 0.75);
      border: 0px;
      padding: 5px 10px;
      cursor: pointer;
    }
 
    button:hover {
      background-color: rgba(0, 255, 255, 0.5);
    }
 
    button:active {
      color: #000000;
      background-color: rgba(0, 255, 255, 0.75);
    }
</style>
</head>
……

创作流程

我设计这个项目时，心中想的不只是展示一张化学课本上的周期表，而是希望它能“活”起来——成为一个可以走进去、可以旋转观察、可以感受其结构之美的数字空间。我想要打破二维表格的局限，让用户像宇航员一样，在由元素构成的星系中穿行。

一开始，我决定放弃传统的静态网页思路，转而构建一个三维世界。黑色背景是我刻意选择的“宇宙画布”，每一个元素都是一颗漂浮的星球，拥有自己的位置、亮度与轨迹。我用HTML的div元素作为每个元素的载体，再通过CSS赋予它们发光的边框与悬浮的文字，让它们看起来像是未来科技面板上的信息块。

接下来是布局的设计。我首先还原了标准周期表的排列方式，根据族和周期计算每个元素的坐标，让它们整齐地排列成熟悉的形状。但这还不够。我想展示周期律背后的数学之美，于是开始构思其他形态：能不能把所有元素排成一个完美的球体？像原子轨道一样环绕？于是我在脑海中画出一个球面，用经纬度公式分配每个元素的位置，让它们从四面八方汇聚成一个发光的天体。

然后是螺旋结构的灵感。我想到DNA双螺旋，也想到星系的旋臂，于是尝试用极坐标让元素沿着螺旋线上升，每下降一段就旋转一定角度，形成一种动态上升的视觉节奏。最后是网格布局，我把元素按批次分层，像图书馆的书架一样整齐堆叠，形成一种秩序井然的科技感。

最让我着迷的是切换动画。我不想让布局变化显得生硬，于是我引入了缓动函数，让每个元素以不同的速度飞向新位置，有的快、有的慢，形成一种“粒子流”的美感。这种随机延迟让整体动画更有生命力，仿佛这些元素真的有意识地在重组自己。

交互性也是我关注的重点。我加入了轨道控制器，让用户可以用鼠标自由旋转整个周期表，从任意角度观察。我还设置了底部按钮，一键切换不同形态，就像在切换宇宙的不同维度。每一次点击，都是一次视觉的盛宴。

在整个过程中，我不断调试位置、颜色、动画时长，甚至元素卡片的透明度和光晕强度，只为让整体氛围既科学又梦幻。这不是一个冷冰冰的数据展示，而是一场关于物质本源的诗意旅程。当我最终看到所有元素从混乱的初始状态缓缓归位成一张完整的周期表时，那种秩序诞生的震撼，让我深深体会到编程与科学结合的魅力。

写在后面

我是一只有趣的兔子，感谢你的喜欢！

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布