Front-end simple dynamic Christmas tree animation (HTML, js, css)

Language 2023-12-17 06:35:54 views: null

Show results:

 Note:

  • The overall Christmas tree is divided into three parts, the trunk of the book, the particle effects, and the cards on the tree.
  • Cards on the tree (key point): Each card has a name, which represents the leaves of the Christmas tree. You can change it later according to your own needs. For example, change them all to the name of the person you like, and change the content in the fifth line of the JS code.
  • The dynamic rotation of the tree is implemented through js, and the backbone is HTML5 and style CSS.

Build file page:

  • Create an empty folder on the desktop and open it with VSCode
  • Create three new files in VSCodeindex .html   domtree.css domtree.js  (file name It must be the same as this, otherwise an error will occur), don’t forget to save
  • Regarding the file hierarchy issue, the three index.html domtree.css domtree.js should not be modified in the same level folder. If Selection needs to be changed at the next level or one level above
  • In the index.html code interface, the default key Alt+B or right-click the mouse and select the third to last Open In Default Browser to open in the default browser

Code:

 HTML：

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<meta name="description" content="一个由表单元素构建的圣诞树。" />
	<meta name="author" content="Hakim El Hattab" />
	<meta http-equiv="X-UA-Compatible" content="chrome=1">
	<title>耀南.DOM Tree</title>
	<link href="domtree.css" rel="stylesheet" media="screen" /> <!-- 引用外部的 CSS 文件 -->
	<link href='https://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'> <!-- 引用 Google 字体 -->
</head>

<body>
	<div class="tree"></div> <!-- 用于显示 DOM 树的容器 -->
	<script src="domtree.js"></script> <!-- 引用外部的 JavaScript 文件 -->
	<!-- 第三方脚本和分享 UI -->
	<!-- src属性指定了音频文件的路径。autoplay属性设置为true表示自动播放音频，loop属性设置为true表示循环播放音频。hidden属性用于隐藏音频播放器。 -->
	<!-- <embed src="./d097_5915_926d_6fecd684bf63cc9120aac307ea49206c.mp3" hidden="true" autostart="true" loop="true"> -->
	<audio src="./d097_5915_926d_6fecd684bf63cc9120aac307ea49206c.mp3" autoplay loop hidden></audio>
	<p class="project-title">DOM Tree</p> <!-- 项目标题 -->
	<div class="credits">
		<a href="https://blog.csdn.net/YN2000609?spm=1000.2115.3001.5343">耀南.</a>
		<a href="https://blog.csdn.net/YN2000609?spm=1000.2115.3001.5343">文章代码参考@耀南.</a>
	</div>

	<style type="text/css" media="screen">
		.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;
			}
		}
	</style>

	<script>
		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');
	</script>

</body>

</html>

css code:

 
/*********************************************
 * 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;
 }

Modify the background color:

 In lines 39 to 43 of the Css code, you can change different background colors or background images. Place the mouse on the red box and a color selection will appear as shown in the picture above. Pull to select a different color background.

Modify audio: 

  • Add the following code on line 23 of the index.html code:                                                                                                                                                         >
  • src="Music Address", put the music you want to play in this folder in advance, fill in the name of the music into src and you can play the music
  • hidden="true" means hiding the music play button, hidden="false"turning on the music play button
  • autostart="true" Play automatically after opening the web page and loading it.
  • loop="true"Loop playback If you only want to play once, loop="false"

 Modify the content on the card:

  • The cards on the Christmas tree are of different types. Some cards can be scrolled down to view the content below.
  • The content of the card on the Christmas tree can be modified. Modify the const greetings = [ ] in the fifth line of the JS code and change the content to what you want. If the leaves are not enough, you can add it later.

js code:

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 < 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, // 元素初始位置的 x 坐标
    y = Math.round(Math.random() * height); // 元素初始位置的 y 坐标

  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'); // 设置进度条的最大值为 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'); // 设置表尺的最小值为 0
      element.setAttribute('max', '100'); // 设置表尺的最大值为 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(); // 页面加载时初始化树的位置

If you think it’s good, please give it a like and share it with your friends! ! !

Guess you like

Origin blog.csdn.net/YN2000609/article/details/131665717
Recommended
Ranking
Linux关机和重启详解（shutdown、halt、poweroff、reboot、init）
Netty work notes 0007---NIO's three core component relationships
Knife4j tutorial
2021.10.29，内容:什么时候用接口和抽象类
How to solve the problem that changing the memory frequency causes the computer to become unusable?
SpringMVC Tutorial - Controller
linux learning skills -Linux 25 transport Vega paid special privileges and facl extension
Financial quarterly report evaluation report data automatic generation 1.0
Agile Development Series - The Values of Agile Development
scrapy achieve browsercookie Middleware
Daily
More
2024-05-19(0)
2024-05-18(31)
2024-05-17(6)
2024-05-16(23)
2024-05-15(5)
2024-05-14(9)
2024-05-13(8)
2024-05-12(28)
2024-05-11(32)
2024-05-10(34)

Code World

© 2018 codetd.com