three实现三维原子围绕原子核旋转动画效果代码

代码语言:html

所属分类:三维

代码描述:three实现三维原子围绕原子核旋转动画效果代码

代码标签: three 三维 原子 围绕 原子核 旋转 动画

下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="UTF-8">


    <style>
        @import "https://fonts.googleapis.com/css?family=Oswald:300,400,700";
        
        html,
        body {
        	font-family: "Oswald", sans-serif;
        	margin: 0;
        	width: 100%;
        	height: 100%;
        	background-color: hsla(240, 81%, 8%, 0.81);
        }
        h1,
        h3 {
        	margin: 0;
        }
        canvas {
        	mix-blend-mode: screen;
        	cursor: move;
        }
        .linebox {
        	position: fixed;
        	width: calc(100% - 30px);
        	height: calc(100% - 30px);
        	border: 4px solid #ddd;
        	left: 50%;
        	top: 50%;
        	transform: translate(-50%, -50%);
        }
        .texts {
        	position: fixed;
        	color: #eee;
        	left: 2rem;
        	top: 0.8rem;
        	padding: 0.8rem;
        }
        .texts h1 {
        	font-size: 7rem;
        	letter-spacing: 0.24rem;
     .........完整代码请登录后点击上方下载按钮下载查看

网友评论0