snow

✨ 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;
		}
		.tree {
			position: absolute;
			top: calc(40% - 150px);
      left: calc(60% - 100px - var(--j) * 50px);
			transform: perspective(1000px);
			width: 100px * var(--j);
      height: 100px;
			transform-style: preserve-3d;
      transform: translateY(calc(100px * var(--j)));
			/* background: black; */
			/*กำหนดตำแหน่งต้นไม้*/
		}
		.tree div {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transform-style: preserve-3d;
      animation: animate 5s linear infinite;
		}
    .tree:hover{
      top: calc(40% - 150px);
      animation: animate .2s linear infinite;
    }
		.tree div span {
			position: absolute;
			top: 0;
			left: 0;
			display: block;
			width: 100%;
			height: 100%;
			background: linear-gradient(to left, hsl(171, 100%, 21%), hsl(86, 100%, 81%), hsl(171, 100%, 21%));
      /* background: #cbaf71; */
			/* สีใบไม้ */
      border-top-left-radius: 25px;
      border-top-right-radius: 25px;
		}
    .tree div span:nth-child(1){
      transform: rotateY(0deg);
    }
    .tree div span:nth-child(2){
      transform: rotateY(45deg);
    }
    .tree div span:nth-child(3){
      transform: rotateY(90deg);
    }
    .tree div span:nth-child(4){
      transform: rotateY(135deg);
    }
    @keyframes animate
    {
      0%
      {
        transform: perspective(1000px) rotateY(0deg);
      }
      100%
      {
        transform: perspective(1000px) rotateY(359deg);
      }
    }
    .snow1{
      position:absolute;
      bottom:0;
      width:100%;
    }
    .snow2{
      position:absolute;
      bottom:0;
      width:100%;
      opacity: .7;
    }
	</style>
</head>