200行Html5+CSS3+JS代码实现动态圣诞树

• 对于文件的层级问题，三个index .html   domtree.css   domtree.js 在同一级文件夹内不要修改，如果在下一个层级或者上面一个层级需要改动选择

• 在index.html代码界面，默认键Alt+B 或者 鼠标右击，选择倒数第三个Open In  Default  Browser默认浏览器打开

4.添加额外功能

修改背景：

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

添加音乐：

• 在index.html代码中的第23行添加下列代码：                                                           

• src=“音乐地址”，把想要播放的音乐，提前放到这个文件夹中，把这个音乐的命名填入src中就可以播放音乐

• hidden="true"表示隐藏音乐播放按钮，hidden="false"开启音乐播放按钮

• autostart=“true” 打开网页加载完后自动播放

• loop="true"循环播放 如仅想播放一次则为：loop=“false”

修改卡片上的内容：

• 圣诞树上面的卡片是由不同的类型的，有的卡片可以下拉查看下面的内容

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

四、编码实现

---

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;

}

Html代码：

DOM Tree

知心宝贝

文章代码参考@hakimel

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 );

// The tree

for( 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 ),

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。**

[外链图片转存中…(img-iErfiiUe-1715282114787)]

[外链图片转存中…(img-2kzpAFZ0-1715282114787)]

[外链图片转存中…(img-Wg0PTuPQ-1715282114787)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！