一、效果展示
- 整体圣诞树分为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="https://fonts.googleapis.com/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="https://blog.csdn.net/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 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,
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();
本文转载自: https://blog.csdn.net/m0_64346035/article/details/125446382
版权归原作者 燕穗子博客 所有， 如有侵权，请联系我们删除。
版权归原作者 燕穗子博客 所有， 如有侵权，请联系我们删除。