目录
一、效果展示
二、实现步骤
1、index.html
2、domtree.css
3、domtree.js
一、效果展示
整体圣诞树分为3个部分，书的主干、粒子特效、树上的卡片树上的卡片(重点)：每一张卡片上都有一个名字，代表圣诞树的叶子，后面可以根据自己需求更改，比如全部改成喜欢人的名字，在JS代码的第五行内更改内容树的动态旋转通过js实现、主干是html5、样式CSS
二、实现步骤
在桌面新建一个空的文件夹，用VSCode打开
在VSCode新建三个文件 index .html domtree.css domtree.js （文件名字要和这个一样，不然会出错），保存别忘了
对于文件的层级问题，三个index .html domtree.css domtree.js 在同一级文件夹内不要修改，如果在下一个层级或者上面一个层级需要改动选择
在index.html代码界面，默认键Alt+B 或者 鼠标右击，选择倒数第三个Open In Default Browser默认浏览器打开
1、index.html
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="description" content="用造型元素建造的圣诞树" /><meta name="author" content="wangchunyan" /><meta http-equiv="X-UA-Compatible" content="chrome=1" /><title>DOM Tree</title><!-- 重制样式表 --><link href="domtree.css" rel="stylesheet" media="screen" /><!-- 引入图标样式 --><link href="/css?family=Armata" rel="stylesheet" type="text/css" /></head><body><div class="tree"></div><!-- 引入js文件 --><script src="domtree.js"></script><!-- 底下文字部分 --><p class="project-title">DOM Tree</p><div class="credits"><a href="/m0_64346035?spm=1010.2135.3001.5343">燕穗子</a></a></div></body></html>
2、domtree.css
/* 去除默认样式 */*{margin: 0;padding: 0;}li{list-style: none;}a{text-decoration: none;}body,html {overflow: hidden;font-family: Helvetica, Arial, sans-serif;color: #fff;font-size: 11px;width: 100%;height: 100%;background: #b72424;/* 渐变色，处理兼容问题 */background: -moz-radial-gradient(center, ellipse cover, #b72424 0%, #492727 100%);background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #b72424), color-stop(100%, #492727));background: -webkit-radial-gradient(center, ellipse cover, #b72424 0%, #492727 100%);background: radial-gradient(center, ellipse cover, #b72424 0%, #492727 100%);}@keyframes spin {0% {transform: rotateY(0deg);}100% {transform: rotateY(360deg);}}body {/* 透视效果 */perspective: 3000px;perspective-origin: 0 20%;}.tree {margin: 0 auto;position: relative;animation: spin 18s infinite linear;transform-origin: 50% 0;transform-style: preserve-3d;}.tree * {position: absolute;transform-origin: 0 0;}/* 底下文字部分样式*/.project-title {position: absolute;left: 25px;bottom: 20px;font-size: 16px;color: #fff;}.credits {position: absolute;right: 20px;bottom: 25px;font-size: 15px;z-index: 20;color: #fff;vertical-align: middle;}.credits a {padding: 8px 10px;color: rgba(255, 255, 255, 0.7);border: 2px solid rgba(255, 255, 255, 0.7);text-decoration: none;}.credits a:hover {border-color: #fff;color: #fff;}@media screen and (max-width: 1040px) {.project-title {display: none;}.credits {width: 100%;left: 0;right: auto;bottom: 0;padding: 30px 0;background: #b72424;text-align: center;}.credits a {display: inline-block;margin-top: 7px;margin-bottom: 7px;}}
3、domtree.js
const width = 500; //树的宽度const height = 600; //树的长度const quantity = 150; //树枝的数量const types = ["text", "select", "progress", "meter", "button", "radio", "checkbox"];const greetings = [//文字"知心宝贝","知心宝贝","Merry Christmas","Merry Christmas","Merry Christmas","Merry Christmas","知心宝贝","12月25","知心宝贝","Merry Christmas","Happy Holidays"," 知心宝贝","12月25","知心宝贝","Merry Christmas","知心宝贝","Merry Christmas","知心宝贝",];let tree = document.querySelector(".tree"),treeRotation = 0;tree.style.width = width + "px";tree.style.height = height + "px";// tree.style.backgroundColor='pink'window.addEventListener("resize", resize, false);// The treefor (var i = 0; i < quantity; i++) {let element = null,type = types[Math.floor(Math.random() * types.length)],greeting = greetings[Math.floor(Math.random() * greetings.length)];//树枝随机宽高let x = width / 2,y = Math.round(Math.random() * height);let rx = 0,ry = Math.random() * 360,rz = -Math.random() * 15;let elemenWidth = 5 + ((y / height) * width) / 2,elemenHeight = 26;switch (type) {case "button":element = document.createElement("button");element.textContent = greeting;element.style.width = elemenWidth + "px";element.style.height = elemenHeight + "px";break;case "progress":element = document.createElement("progress");element.style.width = elemenWidth + "px";element.style.height = elemenHeight + "px";if (Math.random() > 0.5) {element.setAttribute("max", "100");element.setAttribute("value", Math.round(Math.random() * 100));}break;case "select":element = document.createElement("select");element.setAttribute("selected", greeting);element.innerHTML = "<option>" + greetings.join("</option><option>") + "</option>";element.style.width = elemenWidth + "px";element.style.height = elemenHeight + "px";break;case "meter":element = document.createElement("meter");element.setAttribute("min", "0");element.setAttribute("max", "100");element.setAttribute("value", Math.round(Math.random() * 100));element.style.width = elemenWidth + "px";element.style.height = elemenHeight + "px";break;case "text":default:element = document.createElement("input");element.setAttribute("type", "text");element.setAttribute("value", greeting);element.style.width = elemenWidth + "px";element.style.height = elemenHeight + "px";}element.style.transform = `translate3d(${x}px, ${y}px, 0px) rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`;tree.appendChild(element);}// 设置雪花for (var i = 0; i < 200; i++) {let element = document.createElement("input");element.setAttribute("type", "radio");let spread = window.innerWidth / 2;let x = Math.round(Math.random() * spread) - spread / 4,y = Math.round(Math.random() * height),z = Math.round(Math.random() * spread) - spread / 2;let rx = 0,ry = Math.random() * 360,rz = 0;if (Math.random() > 0.5) element.setAttribute("checked", "");element.style.transform = `translate3d(${x}px, ${y}px, ${z}px) rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`;tree.appendChild(element);}function resize() {tree.style.top = (window.innerHeight - height - 100) / 2 + "px";}resize();
