HTML动态圣诞树代码

圣诞节到了，大家肯定都想体验一下节日的氛围，可以在网页中加入一个动态的圣诞树展示，为用户带来更多的节日感。

<!DOCTYPE html>
<html>
<head>
	<Meta charset="UTF-8">
	<title>动态圣诞树</title>
	<style>
		body {
			background-color: #0b446f;
			color: #fff;
			font-family: Arial,sans-serif;
			text-align: center;
			margin: 0;
			padding: 0;
		}
		
		.tree {
			position: relative;
			margin: 0 auto;
			top: 50px;
			width: 120px;
			height: 200px;
			background-color: #663300;
			border-radius: 15px;
			overflow: hidden;
		}
		
		.tree .trunk {
			position: absolute;
			bottom: 0;
			left: 50%;
			width: 20px;
			height: 90px;
			background-color: #331900;
			margin-left: -10px;
		}
		
		.tree ul {
			position: absolute;
			top: 0;
			left: 50%;
			margin-left: -47px;
			padding: 0;
		}
		
		.tree ul li {
			list-style: none;
			position: absolute;
			left: 0;
			top: 0;
			width: 0;
			height: 0;
			border-left: 60px solid transparent;
			border-right: 60px solid transparent;
			border-bottom: 150px solid #00cc00;
			transform-origin: bottom center;
		}
		
		.tree ul li:nth-child(1) {
			transform: rotate(-22.5deg);
		}
		
		.tree ul li:nth-child(2) {
			transform: rotate(22.5deg);
		}
		
		.tree ul li:nth-child(3) {
			transform: rotate(-45deg);
		}
		
		.tree ul li:nth-child(4) {
			transform: rotate(45deg);
		}
		
		.tree ul li:nth-child(5) {
			transform: rotate(-67.5deg);
		}
		
		.tree ul li:nth-child(6) {
			transform: rotate(67.5deg);
		}
		
		.tree ul li:nth-child(7) {
			transform: rotate(-90deg);
		}
		
		.tree ul li:nth-child(8) {
			transform: rotate(90deg);
		}
		
		.tree ul li:nth-child(9) {
			transform: rotate(-112.5deg);
		}
		
		.tree ul li:nth-child(10) {
			transform: rotate(112.5deg);
		}
		
		.tree ul li:nth-child(11) {
			transform: rotate(-135deg);
		}
		
		.tree ul li:nth-child(12) {
			transform: rotate(135deg);
		}
	</style>
</head>
<body>
	<div class="tree">
		<div class="trunk"></div>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
	</div>
</body>
</html>

HTML动态圣诞树代码

以上是一个简单的HTML动态圣诞树代码，通过调整旋转角度实现不同的层级效果，给整个页面带来了欢乐的气氛。大家可以根据自己需要加入更多的特效，创造出更有趣的节日效果。

HTML动态圣诞树代码

相关推荐