HTML+CSS to make Christmas tree

When Christmas comes, I see a variety of Christmas trees on the Internet. As a programmer, I also want to make a Christmas tree with code, so I use html+css to make a Christmas tree webpage for my friends.

html code

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="author" content="巴打的圣诞树">
		<title>html+css制作圣诞树</title>
		<link rel="stylesheet" href="css/sd.css"/>
	</head>
	<body>
		<p class="word">Merry Christmas</p>
		<div class="tree">
			<div class=star>
				<div class="star-in"></div>
			</div>
			<!--树叶-->
			<div class="leaf-box">
				<div class="leaf">
					<div class="edge"></div>
					<div class="edge right"></div>
				</div>
				<div class="leaf">
					<div class="edge"></div>
					<div class="edge right"></div>
				</div>
				<div class="leaf">
					<div class="edge"></div>
					<div class="edge right"></div>
				</div>
				<div class="leaf">
					<div class="edge"></div>
					<div class="edge right"></div>
				</div>
				<div class="leaf">
					<div class="edge"></div>
					<div class="edge right"></div>
				</div>
			</div>
			<!--树干-->
			<div class="trunk"></div>
			<!--彩色的球-->
			<div class="ball-box">
				<div class="ball b1"></div>
				<div class="ball b2"></div>
				<div class="ball b3"></div>
				<div class="ball b4"></div>
				<div class="ball b5"></div>
				<div class="ball b6"></div>
				<div class="ball b7"></div>
				<div class="ball b8"></div>
				<div class="ball b9"></div>
			</div>
			<!--闪烁-->
			<div class="sparkle">
				<span>✦</span>
				<span>✦</span>
				<span>✦</span>
				<span>✦</span>
				<span>✦</span>
				<span>✦</span>
			</div>
			<div class="blink">
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>
	</body>
</html>

CSS styles

 html,body{
    
    
	width:100%;
	height:100%;
}
*{
    
    
	margin:0;
	padding:0;
}
body{
    
    
	background-color:#000000;
}
.word{
    
    
	font-size:60px;
	text-align:center;
	color:gold;
	padding-top:70px;
	letter-spacing:5px;
	text-shadow:2px 4px 9px rgba(255, 255, 255, 0.7);
}
/*圣诞树外层div*/
.tree{
    
    
	width:200px;
	height:300px;
	margin:110px auto 0 auto;
	position: relative;
	/*相对定位*/
	/*border:1px solid #fff;*/
}
.star{
    
    
	width:10px;
	height:10px;
	position:absolute;
	/*background-color:#fff;*/
	border-radius: 50%;
	top:0px;
	z-index: 1000;
	left:50%;
	transform:translateX(-50%);
	box-shadow: 0 0 70px 30px rgb(253, 253, 253);
}
.star-in{
    
    
	position:absolute;
	left:35%;
	top:70%;
	border-right:200px solid transparent;
	border-bottom: 150px solid gold;
	border-left:200px solid transparent;
	transform:translateX(-50%) translateY(-50%) rotate(35deg) scale(0.14);
}
.star-in::before{
    
    
	border-bottom:140px solid gold;
	border-left:65px solid transparent;
	border-right:65px solid transparent;
	position:absolute;
	top:-90px;
	left:-140px;
	content:'';
	transform:rotate(-35deg);
}
.star-in::after{
    
    
	border-bottom:140px solid gold;
	border-left:210px solid transparent;
	border-right:200px solid transparent;
	position:absolute;
	top:3px;
	left:-200px;
	content:'';
	transform:rotate(-70deg);
}
.leaf{
    
    
	position:absolute;
	left:50%;
	top:3%;
	margin-left:-30px;
	background-color:rgba(14,110,14);
	width:60px;
	height:60px;
	border-radius:0 10px 35px 10px;
	transform:rotate(45deg);
	box-shadow: 2px 7px 2px rgba(43,43,43,0.2);
}
.edge{
    
    
	position:absolute;
	left:0;
	bottom: 0;
	background:rgba(14,110,14);
	width:25px;
	height:30px;
	border-radius:0 10px 35px 10px;
	transform:translateY(50%) translateX(0);
}
.edge.right{
    
    
	position:absolute;
	left:unset;
	bottom:unset;
	top:0;
	right:0;
	background:rgba(14,110,14);
	width:25px;
	height:30px;
	border-radius:0 10px 35px 10px;
	transform:translateY(0) translateX(50%);
}
/*双数修改背景色*/
.leaf:nth-child(eve){
    
    
	background-color: #0f880f;
}
.leaf:nth-child(eve).edge{
    
    
	background-color: #0f880f;
}
/*最上面*/
.leaf:nth-child(1){
    
    
	z-index: 100;
	transform: rotate(45deg) scale(0.8);
}
/*第二*/
.leaf:nth-child(2){
    
    
	z-index: 99;
	top:15%;
	transform: rotate(45deg) scale(1.3);
}
.leaf:nth-child(3){
    
    
	z-index: 98;
	top:28%;
	transform:rotate(45deg) scale(1.6);
}
.leaf:nth-child(4){
    
    
	z-index: 97;
	top:41%;
	transform:rotate(45deg) scale(1.9);
}
.leaf:nth-child(5){
    
    
	z-index: 96;
	top:54%;
	transform:rotate(45deg) scale(2.2);
}
.trunk{
    
    
	width:25px;
	height:45px;
	border-radius:0 0 3px 3px;
	position:absolute;
	left:50%;
	transform:translate(-50%);
	bottom:20px;
	z-index: 1;
	box-shadow: 0 0 80px 5px rgb(253, 253, 253);
	background:linear-gradient(0deg,#6d411b 0%,#5a341d 64%);
}
.ball{
    
    
	width:20px;
	height:20px;
	background:#f00;
	box-shadow: -1px -1px 6px inset #600,1px 1px 8px inset #ffc9c9;
	border-radius: 50%;
	z-index:101;
	position:absolute;
}
.b1{
    
    
	left:25%;
	top:30%;
}
.b2{
    
    
	left:35%;
	top:50%;
}
.b3{
    
    
	left:65%;
	top:20%;
}
.b4{
    
    
	left:45%;
	top:22%;
}
.b5{
    
    
	left:40%;
	top:72%;
}
.b6{
    
    
	left:60%;
	top:52%;
}
.b7{
    
    
	left:50%;
	top:62%;
}
.b8{
    
    
	left:80%;
	top:42%;
}
.b9{
    
    
	left:10%;
	top:62%;
}
.b4,.b5,.b6{
    
    
	background:#ececec;
	box-shadow: -1px -1px 6px inset #615f5f,1px 1px 8px inset #fff;
}
.b7,.b8,.b9{
    
    
	background:gold;
	box-shadow: -1px -1px 6px inset #3a3101,1px 1px 8px inset #fff;
}
.sparkle span{
    
    
	display:block;
	position:absolute;
	font-size: 20px;
	z-index: 101;
	color:#fff;
	animation: sparkle 1.5s ease infinite alternatel;
}
/*闪烁动画*/
@keyframes sparkle{
    
    
	0%,100%{
    
    
		transform: scale(1);
	}
	50%{
    
    
		transform: scale(1.5);
	}
}
.sparkle span:nth-child(1){
    
    
	left:30%;
	top:40%;
}
.sparkle span:nth-child(2){
    
    
	left:40%;
	top:27%;
	font-size: 15px;
}
.sparkle span:nth-child(3){
    
    
	left:50%;
	top:57%;
	font-size: 12px;
}
.sparkle span:nth-child(4){
    
    
	left:70%;
	top:67%;
	font-size: 14px;
}
.sparkle span:nth-child(5){
    
    
	left:54%;
	top:20%;
	font-size: 20px;
}
.sparkle span:nth-child(6){
    
    
	left:60%;
	top:33%;
	font-size: 20px;
}
.blink div{
    
    
	width:3px;
	height:3px;
	background: #fff;
	z-index: 101;
	position:absolute;
	border-radius: 50%;
	animation:blink 1.5s ease infinite alternate;
}
.blink div:nth-child(2){
    
    
	left:34%;
	top:13%;
	transform: scale(1.2);
}
.blink div:nth-child(3){
    
    
	left:54%;
	top:43%;
	transform: scale(0.6);
}
.blink div:nth-child(4){
    
    
	left:64%;
	top:33%;
	transform: scale(1.4);
}
.blink div:nth-child(5){
    
    
	left:34%;
	top:63%;
	transform: scale(1.8);
}
.blink div:nth-child(6){
    
    
	left:14%;
	top:76%;
	transform: scale(1.5);
}
@keyframes blink{
    
    
	0%{
    
    
		box-shadow: 0 0 0 0 #fff;
	}
	25%{
    
    
		box-shadow: 0 0 1px 1px #fff;
	}
	50%{
    
    
		box-shadow: 0 0 2px 2px #fff;
	}
	75%{
    
    
		box-shadow: 0 0 3px 3px #fff;
	}
	100%{
    
    
		box-shadow: 0 0 4px 4px #fff;
	}
}

renderings

HTML+CSS to make Christmas tree

When Christmas comes, I see a variety of Christmas trees on the Internet. As a programmer, I also want to make a Christmas tree with code, so I use html+css to make a Christmas tree webpage for my friends.

Guess you like