系统定制开发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

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <meta name="description" content="用造型元素建造的圣诞树" />
  6.     <meta name="author" content="wangchunyan" />
  7.     <meta http-equiv="X-UA-Compatible" content="chrome=1" />
  8.     <title>DOM Tree</title>
  9.     <!-- 重制样式表 -->
  10.     <link href="domtree.css" rel="stylesheet" media="screen" />
  11.     <!-- 引入图标样式 -->
  12.     <link href="https://fonts.googleapis.com/css?family=Armata" rel="stylesheet" type="text/css" />
  13.   </head>
  14.   <body>
  15.     <div class="tree"></div>
  16.     <!-- 引入js文件 -->
  17.     <script src="domtree.js"></script>
  18.     <!-- 底下文字部分 -->
  19.     <p class="project-title">DOM Tree</p>
  20.     <div class="credits">
  21.       <a href="https://blog.csdn.net/m0_64346035?spm=1010.2135.3001.5343">燕穗子</a></a>
  22.     </div>
  23.   </body>
  24. </html>

2、domtree.css

  1. /* 去除默认样式 */
  2. *{
  3.     margin: 0;
  4.     padding: 0;
  5. }
  6. li{
  7.     list-style: none;
  8. }
  9. a{
  10.     text-decoration: none;
  11. }
  12. body,
  13. html {
  14.     overflow: hidden;
  15.     font-family: Helvetica, Arial, sans-serif;
  16.     color: #fff;
  17.     font-size: 11px;
  18.     width: 100%;
  19.     height: 100%;
  20.     background: #b72424;
  21.     /* 渐变色，处理兼容问题 */
  22.     background: -moz-radial-gradient(center, ellipse cover, #b72424 0%, #492727 100%);
  23.     background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #b72424), color-stop(100%, #492727));
  24.     background: -webkit-radial-gradient(center, ellipse cover, #b72424 0%, #492727 100%);
  25.     background: radial-gradient(center, ellipse cover, #b72424 0%, #492727 100%);
  26. }
  27.  
  28. @keyframes spin {
  29.     0% {
  30.         transform: rotateY(0deg);
  31.     }
  32.  
  33.     100% {
  34.         transform: rotateY(360deg);
  35.     }
  36. }
  37.  
  38. body {
  39.     /* 透视效果 */
  40.     perspective: 3000px;
  41.     perspective-origin: 0 20%;
  42. }
  43.  
  44. .tree {
  45.     margin: 0 auto;
  46.     position: relative;
  47.     animation: spin 18s infinite linear;
  48.     transform-origin: 50% 0;
  49.     transform-style: preserve-3d;
  50. }
  51.  
  52. .tree * {
  53.     position: absolute;
  54.     transform-origin: 0 0;
  55. }
  56.  
  57. /* 底下文字部分样式*/
  58. .project-title {
  59.     position: absolute;
  60.     left: 25px;
  61.     bottom: 20px;
  62.     font-size: 16px;
  63.     color: #fff;
  64. }
  65.  
  66. .credits {
  67.     position: absolute;
  68.     right: 20px;
  69.     bottom: 25px;
  70.     font-size: 15px;
  71.     z-index: 20;
  72.     color: #fff;
  73.     vertical-align: middle;
  74. }
  75.  
  76. .credits a {
  77.     padding: 8px 10px;
  78.     color: rgba(255, 255, 255, 0.7);
  79.     border: 2px solid rgba(255, 255, 255, 0.7);
  80.     text-decoration: none;
  81. }
  82.  
  83. .credits a:hover {
  84.     border-color: #fff;
  85.     color: #fff;
  86. }
  87.  
  88. @media screen and (max-width: 1040px) {
  89.     .project-title {
  90.         display: none;
  91.     }
  92.  
  93.     .credits {
  94.         width: 100%;
  95.         left: 0;
  96.         right: auto;
  97.         bottom: 0;
  98.         padding: 30px 0;
  99.         background: #b72424;
  100.         text-align: center;
  101.     }
  102.  
  103.     .credits a {
  104.         display: inline-block;
  105.         margin-top: 7px;
  106.         margin-bottom: 7px;
  107.     }
  108. }

 3、domtree.js

  1. const width = 500; //树的宽度
  2. const height = 600; //树的长度
  3. const quantity = 150; //树枝的数量
  4. const types = ["text", "select", "progress", "meter", "button", "radio", "checkbox"];
  5. const greetings = [
  6.   //文字
  7.   "知心宝贝",
  8.   "知心宝贝",
  9.   "Merry Christmas",
  10.   "Merry Christmas",
  11.   "Merry Christmas",
  12.   "Merry Christmas",
  13.   "知心宝贝",
  14.   "12月25",
  15.   "知心宝贝",
  16.   "Merry Christmas",
  17.   "Happy Holidays",
  18.   " 知心宝贝",
  19.   "12月25",
  20.   "知心宝贝",
  21.   "Merry Christmas",
  22.   "知心宝贝",
  23.   "Merry Christmas",
  24.   "知心宝贝",
  25. ];
  26. let tree = document.querySelector(".tree"),
  27.   treeRotation = 0;
  28. tree.style.width = width + "px";
  29. tree.style.height = height + "px";
  30. // tree.style.backgroundColor='pink'
  31.  
  32. window.addEventListener("resize", resize, false);
  33.  
  34. // The tree
  35. for (var i = 0; i < quantity; i++) {
  36.   let element = null,
  37.     type = types[Math.floor(Math.random() * types.length)],
  38.     greeting = greetings[Math.floor(Math.random() * greetings.length)];
  39.  
  40.   //树枝随机宽高
  41.   let x = width / 2,
  42.     y = Math.round(Math.random() * height);
  43.  
  44.   let rx = 0,
  45.     ry = Math.random() * 360,
  46.     rz = -Math.random() * 15;
  47.  
  48.   let elemenWidth = 5 + ((y / height) * width) / 2,
  49.     elemenHeight = 26;
  50.  
  51.   switch (type) {
  52.     case "button":
  53.       element = document.createElement("button");
  54.       element.textContent = greeting;
  55.       element.style.width = elemenWidth + "px";
  56.       element.style.height = elemenHeight + "px";
  57.       break;
  58.     case "progress":
  59.       element = document.createElement("progress");
  60.       element.style.width = elemenWidth + "px";
  61.       element.style.height = elemenHeight + "px";
  62.       if (Math.random() > 0.5) {
  63.         element.setAttribute("max", "100");
  64.         element.setAttribute("value", Math.round(Math.random() * 100));
  65.       }
  66.       break;
  67.     case "select":
  68.       element = document.createElement("select");
  69.       element.setAttribute("selected", greeting);
  70.       element.innerHTML = "<option>" + greetings.join("</option><option>") + "</option>";
  71.       element.style.width = elemenWidth + "px";
  72.       element.style.height = elemenHeight + "px";
  73.       break;
  74.     case "meter":
  75.       element = document.createElement("meter");
  76.       element.setAttribute("min", "0");
  77.       element.setAttribute("max", "100");
  78.       element.setAttribute("value", Math.round(Math.random() * 100));
  79.       element.style.width = elemenWidth + "px";
  80.       element.style.height = elemenHeight + "px";
  81.       break;
  82.     case "text":
  83.     default:
  84.       element = document.createElement("input");
  85.       element.setAttribute("type", "text");
  86.       element.setAttribute("value", greeting);
  87.       element.style.width = elemenWidth + "px";
  88.       element.style.height = elemenHeight + "px";
  89.   }
  90.  
  91.   element.style.transform = `translate3d(${x}px, ${y}px, 0px) rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`;
  92.  
  93.   tree.appendChild(element);
  94. }
  95.  
  96. // 设置雪花
  97. for (var i = 0; i < 200; i++) {
  98.   let element = document.createElement("input");
  99.   element.setAttribute("type", "radio");
  100.  
  101.   let spread = window.innerWidth / 2;
  102.  
  103.   let x = Math.round(Math.random() * spread) - spread / 4,
  104.     y = Math.round(Math.random() * height),
  105.     z = Math.round(Math.random() * spread) - spread / 2;
  106.  
  107.   let rx = 0,
  108.     ry = Math.random() * 360,
  109.     rz = 0;
  110.  
  111.   if (Math.random() > 0.5) element.setAttribute("checked", "");
  112.  
  113.   element.style.transform = `translate3d(${x}px, ${y}px, ${z}px) rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`;
  114.  
  115.   tree.appendChild(element);
  116. }
  117.  
  118. function resize() {
  119.   tree.style.top = (window.innerHeight - height - 100) / 2 + "px";
  120. }
  121.  
  122. resize();

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发