Html5+CSS3+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="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();

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

一、效果展示

二、实现步骤

1、index.html

2、domtree.css

3、domtree.js

猜你喜欢