christmas tree – CODEBOX

christmas tree

✨ SASITHORN SRIJUN

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

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Christmas Tree 🎄</title>
	<style>
		* {
			margin: 0;
			box-sizing: border-box;
		}

body {
			padding: 0;
			/* background-color:#ad242c; */
			background: #333;
			background-image: url(https://cdn.discordapp.com/attachments/934495688534929461/938299775739101235/130.jpg);
			background-repeat: no-repeat;
			background-attachment: fixed;
			background-size: cover;
			background-position: center;
		}

.box-tree {
			height: 100px;
			width: 100%;
			display: flex;
			justify-content: center;
		}

.tree {
			width: 100px;
			height: 100px;
			/* background: black; */
			/*กำหนดตำแหน่งต้นไม้*/
		}

.tree div:hover {
			animation: animate 1s linear infinite;
		}

.tree div {
			width: 100%;
			height: 100%;
			transform-style: preserve-3d;
			animation: animate 5s linear infinite;
			border-top-left-radius: 35px;
			border-top-right-radius: 35px;
		}

.tree div span {
			position: absolute;
			top: 0;
			left: 0;
			display: flex;
			justify-content: center;
			width: 100%;
			height: 100%;
			background: linear-gradient(to bottom, hsl(100, 100%, 100%), hsl(100, 20%, 80%), hsl(100, 73%, 34%), hsl(120, 100%, 10%));
			/* background: #cbaf71; */
			/* สีใบไม้ */
			border-top-left-radius: 35px;
			border-top-right-radius: 35px;
        	box-shadow: 0 0 10px #fff, 7px 0px 0px green;
      /* animation: color 5s linear infinite; */
		}

.tree div span:nth-child(1) {
			transform: rotateY(0deg);
		}

.tree div span:nth-child(2) {
			transform: rotateY(90deg);
		}

.tree div span:nth-child(3) {
			transform: rotateY(45deg);
		}

.tree div span:nth-child(4) {
			transform: rotateY(135deg);
		}

@keyframes animate {
			from {
				transform: perspective(1000px) rotateY(0deg);
			}
			to {
				transform: perspective(1000px) rotateY(360deg);
			}
		}

/* @keyframes color {
			0% {
				background-color:hsl(0, 100%, 50%);
			}
      8.3% {
				background-color:hsl(30, 100%, 50%);
			}
      16.6% {
				background-color:hsl(60, 100%, 50%);
			}
      24.9% {
				background-color:hsl(90, 100%, 50%);
			}
      33.2% {
				background-color:hsl(120, 100%, 50%);
			}
      41.5% {
				background-color:hsl(150, 100%, 50%);
			}
      49.8% {
				background-color:hsl(180, 100%, 50%);
			}
      58.1% {
				background-color:hsl(210, 100%, 50%);
			}
      66.4% {
				background-color:hsl(240, 100%, 50%);
			}
      74.7% {
				background-color:hsl(270, 100%, 50%);
			}
      83% {
				background-color:hsl(300, 100%, 50%);
			}
      91.3% {
				background-color:hsl(330, 100%, 50%);
			}
			100% {
				background-color:hsl(360, 100%, 50%);
			}
		} */

.snow1 {
			position: fixed;
			bottom: 0;
			width: 100%;
		}

.snow2 {
			position: fixed;
			bottom: 0;
			width: 100%;
			opacity: .9;
		}
    
	</style>
</head>

<body>
  
  <audio controls autoplay loop>
      <source src="https://cdn.discordapp.com/attachments/930100761365467196/934069825985216512/deep-ambient-11051.mp3" type="audio/mpeg">
  </audio>

<div class="box-tree" style="transform: translateY(600px);">
		<div class=tree>
			<div>
				<span style="--i:0; background:linear-gradient(to left, hsl(25, 20%, 25%), hsl(35, 28%, 37%), hsl(25, 20%, 25%)); border-radius:0px;"> </span>
        <span style="--i:1; background:linear-gradient(to left, hsl(25, 20%, 25%), hsl(35, 28%, 37%), hsl(25, 20%, 25%)); border-radius:0px;"> </span>
        <span style="--i:2; background:linear-gradient(to left, hsl(25, 20%, 25%), hsl(35, 28%, 37%), hsl(25, 20%, 25%)); border-radius:0px;"> </span>
        <span style="--i:3; background:linear-gradient(to left, hsl(25, 20%, 25%), hsl(35, 28%, 37%), hsl(25, 20%, 25%)); border-radius:0px;"> </span>
      </div>
  	 </div>
  </div>
  <div class="box-tree">
    <div class=tree>
      <div>
        
        <span style="--i:0;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812970031530014/daf0ffd4ea36a1d8.png" height="100px">
        </span>
        <span style="--i:1;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812970031530014/daf0ffd4ea36a1d8.png" height="100px">
        </span>
        <span style="--i:2;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812970031530014/daf0ffd4ea36a1d8.png" height="100px">
        </span>
        <span style="--i:3;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812970031530014/daf0ffd4ea36a1d8.png" height="100px">
        </span>
      </div>
  	 </div>
  </div>
  <div class="box-tree">
    <div class=tree style="width:200px;">
      <div>
        <span style="--i:0;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812970031530014/daf0ffd4ea36a1d8.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812883532394567/726590106d5a4ba3.png" width="100px">
        </span>
        <span style="--i:1;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812883532394567/726590106d5a4ba3.png" width="100px">
        </span>
        <span style="--i:2;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812883922452570/596aff5d28a7f208.png" height="100px"> 
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="100px">
        </span>
        <span style="--i:3;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884253831168/883a33bd96c8e03a.png" height="100px"> 
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="100px">
        </span>
      </div>
  	 </div>
  </div>
  <div class="box-tree">
    <div class=tree style="width:300px;">
      <div>
        <span style="--i:0;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884253831168/883a33bd96c8e03a.png" height="95px"> 
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="95px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885017190410/1b5b197dad21db7d.png" height="95px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812882987126834/83d156c7e16f0367.png" height="95px">
        </span>
        <span style="--i:1;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812883922452570/596aff5d28a7f208.png" height="95px"> 
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="95px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885017190410/1b5b197dad21db7d.png" height="95px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812882987126834/83d156c7e16f0367.png" height="95px">
        </span>
        <span style="--i:2;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884253831168/883a33bd96c8e03a.png" height="95px"> 
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="95px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885017190410/1b5b197dad21db7d.png" height="95px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812882987126834/83d156c7e16f0367.png" height="95px">
        </span>
        <span style="--i:3;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812883922452570/596aff5d28a7f208.png" height="95px"> 
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="95px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885017190410/1b5b197dad21db7d.png" height="95px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812882987126834/83d156c7e16f0367.png" height="95px">
        </span>
      </div>
  	 </div>
  </div>
  <div class="box-tree">
    <div class=tree style="width:400px;">
      <div>
        <span style="--i:0;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885017190410/1b5b197dad21db7d.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885017190410/1b5b197dad21db7d.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884253831168/883a33bd96c8e03a.png" height="100px"> 
        </span>
        <span style="--i:1;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885809893406/01d6f3cf3b9ed7e0.PNG" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884702605392/9e8555dacea64793.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812970031530014/daf0ffd4ea36a1d8.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812970031530014/daf0ffd4ea36a1d8.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884253831168/883a33bd96c8e03a.png" height="100px"> 
        </span>
        <span style="--i:2;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884253831168/883a33bd96c8e03a.png" height="100px"> 
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885017190410/1b5b197dad21db7d.png" height="95px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885809893406/01d6f3cf3b9ed7e0.PNG" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885809893406/01d6f3cf3b9ed7e0.PNG" height="100px">
        </span>
        <span style="--i:3;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884253831168/883a33bd96c8e03a.png" height="100px"> 
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884253831168/883a33bd96c8e03a.png" height="100px"> 
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812883922452570/596aff5d28a7f208.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="100px">
        </span>
      </div>
  	 </div>
  </div>
  <div class="box-tree">
    <div class=tree style="width:500px;">
      <div>
        <span style="--i:0;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884253831168/883a33bd96c8e03a.png" height="100px"> 
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884702605392/9e8555dacea64793.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884253831168/883a33bd96c8e03a.png" height="100px"> 
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="100px">
        </span>
        <span style="--i:1;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812883922452570/596aff5d28a7f208.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812970031530014/daf0ffd4ea36a1d8.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884702605392/9e8555dacea64793.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884253831168/883a33bd96c8e03a.png" height="100px"> 
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="100px">
        </span>
        <span style="--i:2;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884702605392/9e8555dacea64793.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884253831168/883a33bd96c8e03a.png" height="100px"> 
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884702605392/9e8555dacea64793.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884253831168/883a33bd96c8e03a.png" height="100px"> 
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="100px">
        </span>
        <span style="--i:3;">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884702605392/9e8555dacea64793.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884253831168/883a33bd96c8e03a.png" height="100px"> 
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812883922452570/596aff5d28a7f208.png" height="100px"> 
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812885461782598/6340d982ee4b9344.png" height="100px">
          <img src="https://cdn.discordapp.com/attachments/932852565803143169/938812884253831168/883a33bd96c8e03a.png" height="100px"> 
        </span>
      </div>
  	 </div>
  </div>

<svg class="snow1" width=100% viewBox="0 0 1918 254" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M803.176 172C597.548 47.2 181.38 14.6667 -1 14V255H1918V0C1827.48 50 1605.25 140.2 1440.5 101C1234.58 52 1060.21 328 803.176 172Z" fill="white"/>
  </svg>
  <svg class="snow2" width=100% viewBox="0 0 1920 376" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path d="M748.33 182.409C597.539 76.1784 185.947 16.5403 -1 0V376H1964V102.736C1836.12 68.4907 1537.72 27.6758 1367.21 138.379C1154.07 276.758 936.818 315.197 748.33 182.409Z" fill="#EEEEEE"/>
  </svg>
</body>
</html>

>