3D元素周期表源码（已加注释）及分析

最新推荐文章于 2024-05-03 16:17:11 发布

Ben_小b

最新推荐文章于 2024-05-03 16:17:11 发布

阅读量4.8k

点赞数 15

分类专栏：前端demo 文章标签： 3d

本文链接：https://blog.csdn.net/xiao_xiao_b/article/details/100056447

版权

废话不多说，直接上源码
需要几个js文件，记得加上

		<script src="js/three.min.js"></script>
		<script src="js/tween.min.js"></script>
		<script src="js/TrackballControls.js"></script>
		<script src="js/CSS3DRenderer.js"></script>

<!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>

		<script>
			function fangdajing() {
    
				var sc = document.creatElement('style');
				sc.innerHTML="
				
				"
			}
		</script>
		<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;
				font-family: verdana, Tahoma, Arial, Hei, "Microsoft Yahei", SimHei;
			}

			.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 .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>
	<body>
		<script src="js/three.min.js"></script>
		<script src="js/tween.min.js"></script>
		<script src="js/TrackballControls.js"></script>
		<script src="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>
			//这里是定义table元素放入展示的内容,在后面再对table进行解析
			var table = [
				"H", "飞翔的企鹅", "1.00794", 1, 1,
				"He", "Helium", "4.002602", 18, 1,

最低0.47元/天解锁文章

Ben_小b

关注

15
点赞
踩
31

收藏

觉得还不错? 一键收藏
2
评论
3D元素周期表源码（已加注释）及分析

废话不多说，直接上源码需要几个js文件，记得加上 <script src="js/three.min.js"></script> <script src="js/tween.min.js"></script> <script src="js/TrackballControls.js"></script> &l...
复制链接

扫一扫

专栏目录