元素周期表
看看效果
开始
介绍
当然是先介绍一下哈，如下
化学元素周期表是根据原子序数从小至大排序的，化学元素列表大体呈长方形，某些元素周期表中留有空格，使特性相近的元素归在同一族中，如碱金属元素，碱土金属，卤族元素，稀有气体等，这是周期表中形成元素分区，且分有七主族，七副族，VIII族，0族。
第一步
创建一个新的页面
1
| hexo n page Periodic-table
|
第二步
打开Periodic-table的index.md
在最前面加入layout: false
这个是让页面不渲染
第三步
我都把绝大部分的css和js已经上传到我自己了GitHub仓库啦，
直接就可以使用啦
在下面加入
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| {% raw %}
<!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>3D-元素周期表</title>
<style>
@import url(https://cdn.jsdelivr.net/gh/foxscallion11/mm5/3D-js/c.css);
</style>
</head>
<body >
<script src="https://cdn.jsdelivr.net/gh/foxscallion11/mm5/3D-js/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/foxscallion11/mm5/3D-js/tween.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/foxscallion11/mm5/3D-js/TrackballControls.js"></script>
<script src="https://cdn.jsdelivr.net/gh/foxscallion11/mm5/3D-js/CSS3DRenderer.js"></script>
<div id="container"></div>
<div id="info">3D-元素周期表</div>
<div id="menu">
<button id="table">表面</button>
<button id="sphere">球体</button>
<button id="helix">螺旋</button>
<button id="grid">网格</button>
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/foxscallion11/mm5/3D-js/j.js"></script>
</body>
</html>
{% endraw %}
|
完成啦
注意
本文写作不易，给个评论支持一下噢，蟹蟹啦
