效果展示：

注释：

  • 整体圣诞树分为3个部分，书的主干、粒子特效、树上的卡片
  • 树上的卡片(重点)：每一张卡片上都有一个名字，代表圣诞树的叶子，后面可以根据自己需求更改，比如全部改成喜欢人的名字，在JS代码的第五行内更改内容
  • 树的动态旋转通过js实现、主干是HTML5、样式CSS

构建文件页面：

  • 在桌面新建一个空的文件夹，用VSCode打开
  • 在VSCode新建三个文件 index .htmldomtree.cssdomtree.js（文件名字要和这个一样，不然会出错），保存别忘了
  • 对于文件的层级问题，三个index .htmldomtree.cssdomtree.js 在同一级文件夹内不要修改，如果在下一个层级或者上面一个层级需要改动选择
  • 在index.html代码界面，默认键Alt+B 或者 鼠标右击，选择倒数第三个Open InDefaultBrowser默认浏览器打开

代码实现：

HTML：

耀南.DOM Tree   <!--  -->
DOM Tree
 耀南.文章代码参考@耀南..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 *+* {margin-left: 15px;}.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;}}var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];(function (d, t) {var g = d.createElement(t),s = d.getElementsByTagName(t)[0];g.async = true;g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';s.parentNode.insertBefore(g, s);})(document, 'script');

css代码：

 /********************************************* * RESET *********************************************/html{color:#000;background:#222222;} a{cursor:pointer;} html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} li{list-style:none;} caption,th{text-align:left;} /* h1,h2,h3,h4,h5,h6{font-size:100%;} */ q:before,q:after{content:'';} abbr,acronym {border:0;font-variant:normal;} sup {vertical-align:text-top;} sub {vertical-align:text-bottom;} input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline-style:none;outline-width:0pt;} legend{color:#000;} a:focus,object,h1,h2,h3,h4,h5,h6{-moz-outline-style: none; border:0px;} /*input[type="Submit"]{cursor:pointer;}*/ strong {font-weight: bold;} /********************************************** GLOBAL*********************************************/ 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; }

修改背景色：

Css代码的第39到43行，可以更改不同的背景颜色或者背景图片，鼠标放在红色的框上面会出现，上图所示的一个颜色选择，拉动就可以选择不同的颜色背景

修改音频：

  • 在index.html代码中的第23行添加下列代码：
  • src=”音乐地址”，把想要播放的音乐，提前放到这个文件夹中，把这个音乐的命名填入src中就可以播放音乐
  • hidden=”true”表示隐藏音乐播放按钮，hidden=”false”开启音乐播放按钮
  • autostart=”true” 打开网页加载完后自动播放
  • loop=”true”循环播放 如仅想播放一次则为：loop=”false”

修改卡片上的内容：

  • 圣诞树上面的卡片是由不同的类型的，有的卡片可以下拉查看下面的内容
  • 圣诞树上面的卡片是可以修改内容的，在JS代码的第五行的const greetings = [ ]修改，把里面的内容换成你想要的就行，如果叶子不够，在后面还可以加入。

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'; // 设置树的高度window.addEventListener('resize', resize, false); // 监听窗口大小变化// 树的元素for (var i = 0; i  0.5) {element.setAttribute('max', '100'); // 设置进度条的最大值为 100element.setAttribute('value', Math.round(Math.random() * 100)); // 设置进度条的当前值为随机数}break;case 'select':element = document.createElement('select');element.setAttribute('selected', greeting); // 设置选中项为随机选择的问候语element.innerHTML = '' + greetings.join('') + ''; // 生成选项列表element.style.width = elemenWidth + 'px';element.style.height = elemenHeight + 'px';break;case 'meter':element = document.createElement('meter');element.setAttribute('min', '0'); // 设置表尺的最小值为 0element.setAttribute('max', '100'); // 设置表尺的最大值为 100element.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  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(); // 页面加载时初始化树的位置

觉得不错就请给个赞叭，可以分享给你的好友！！！