QE TEAM E P’Pim
✨ PHIRAPHAT KITPROMPHON
<!DOCTYPE html> <div class="starsmall"></div> <div class="starsmall"></div> <div class="starsmall"></div> <div class="starsmall"></div> <div class="starsmall"></div> <div class="starsmall"></div> <div class="starsmall"></div> <div class="starsmall"></div> <div class="starsmall"></div> <div class="starsmall"></div> <div class="starsmall"></div> <div class="starbig", style = "position:absolute; top:5%; left:30%;"></div> <div class="starbig", style = "position:absolute; top:20%; left:5%;"></div> <div class="starbig", style = "position:absolute; top:35%; left:88%;"></div> <div class="starbig", style = "position:absolute; top:58%; left:58%;"></div> <div class="night"> <div class="stardrop"></div> <div class="stardrop"></div> <div class="stardrop"></div> <div class="stardrop"></div> <div class="stardrop"></div> <div class="stardrop"></div> <div class="stardrop"></div> <div class="stardrop"></div> </div> <div class="ufo"></div> <div class="yoda"></div> <div class="laststar"></div> <style> body{ background-image:url("https://cdn.discordapp.com/attachments/798209417455206421/809058873603260416/pngtree-hand-drawn-cute-sky-moon-white-clouds-planet-background-paintedcartoonlovelysky-backgroundpl.png"); margin:0; overflow: hidden; background-size: auto; background-size: 100%; width:100%; height:100%; } @keyframes fade{ from{opacity:.2} to{opacity:1} } .starbig{ position:absolute; width:5px; height:5px; background:white; opacity:1; box-shadow:0px 0px 50px 30px hsla(325, 100%, 82%, 1); border-radius: 50%; animation:fade 1s infinite alternate; } .starsmall{ position:absolute; width:2px; height:2px; background:white; opacity:1; box-shadow:0px 0px 50px 15px hsla(325, 100%, 82%, 1); border-radius: 50%; } .starsmall:nth-child(1){ top:35%; left:15%; animation:fade 1s infinite alternate; } .starsmall:nth-child(2){ top:49%; left:20%; animation:fade 0.8s infinite alternate; } .starsmall:nth-child(3){ top:5%; left:50%; animation:fade 1.2s infinite alternate; } .starsmall:nth-child(4){ top:30%; left:60%; animation:fade 2s infinite alternate; } .starsmall:nth-child(5){ top:3%; left:85%; animation:fade 1.5s infinite alternate; } .starsmall:nth-child(6){ top:11%; left:93%; animation:fade 0.8s infinite alternate; } .starsmall:nth-child(7){ top:52%; left:35%; animation:fade 0.9s infinite alternate; } .starsmall:nth-child(8){ top:60%; left:75%; animation:fade 1s infinite alternate; } .starsmall:nth-child(9){ top:40%; left:50%; animation:fade 1.8s infinite alternate; } .starsmall:nth-child(10){ top:25%; left:42%; animation:fade 0.6s infinite alternate; } .starsmall:nth-child(11){ top:32%; left:28%; animation:fade 1.2s infinite alternate; } .night{ width: 100%; height: 100%; transform: rotateZ(40deg); } .stardrop{ position: absolute; top: 0; left: 0; height: 2px; background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0)); border-radius: 999px; filter: drop-shadow(0 0 6px #699bff); animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite } @keyframes tail{ 0%{ width: 0; } 30%{ width: 100px; } 100%{ width: 0; } } @keyframes shooting{ 0%{ transform: translateX(0); } 100%{ transform: translateX(400px); } } .stardrop::before, .stardrop::after{ content: ''; position: absolute; top: calc(50% - 1px); right: 0; height: 2px; background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0)); border-radius: 100%; transform: translateX(50%) rotateZ(45deg); animation: shining 3000ms ease-in-out infinite } @keyframes shining{ 0%{ width: 0; } 50%{ width: 30px; } 100%{ width: 0; } } .stardrop::after{ transform: translateX(50%) rotateZ(-45deg); } .stardrop:nth-child(1){ top: calc(50% - 200px); left: calc(50% - 300px); animation-delay: 650ms } .stardrop:nth-child(1)::before, .stardrop:nth-child(1)::after{ animation-delay: 650ms } .stardrop:nth-child(2){ top: calc(30% - 50px); right: calc(5% - 190px); animation-delay: 150ms } .stardrop:nth-child(2)::before, .stardrop:nth-child(2)::after{ animation-delay: 150ms } .stardrop:nth-child(3){ top: calc(50% - -90px); left: calc(50% - 500px); animation-delay: 1600ms } .stardrop:nth-child(3)::before, .stardrop:nth-child(3)::after{ animation-delay: 1600ms } .stardrop:nth-child(4){ top: calc(50% - -200px); left: calc(50% - 230px); animation-delay: 4700ms } .stardrop:nth-child(4)::before, .stardrop:nth-child(4)::after{ animation-delay: 4700ms } .stardrop:nth-child(5){ top: calc(50% - 400px); left: calc(50% - 50px); animation-delay: 2100ms } .stardrop:nth-child(5)::before, .stardrop:nth-child(5)::after{ animation-delay: 2100ms } .stardrop:nth-child(6){ top: calc(50% - -500px); left: calc(50% - 450px); animation-delay: 3500ms } .stardrop:nth-child(6)::before, .stardrop:nth-child(6)::after{ animation-delay: 3500ms } .stardrop:nth-child(7){ top: calc(50% - -200px); left: calc(50% - -300px); animation-delay: 3000ms } .stardrop:nth-child(7)::before, .stardrop:nth-child(7)::after{ animation-delay: 3000ms } .ufo { position: absolute; bottom: 0; width: 100%; height: 100%; transform: rotatez(45deg)scale(0.5); background: url('https://cdn.discordapp.com/attachments/798209417455206421/809050270734090300/pngegg.png') no-repeat; animation: floating 4s linear infinite; /*animation: floating 6s infinite;*/ } @keyframes floating { from { left: -50%; bottom: -50%; width: 100%; height: 100%; } to{ left:150%; bottom:150%; width:100%; height:100%; } } .yoda{ position: absolute; top: 50%; right: -65%; width: 100%; height: 100%; background: url('https://cdn.discordapp.com/attachments/798209417455206421/809061332510965818/477ceb1b-5763-4718-80df-540aa4f1f202.png') no-repeat; transform: scale(0.4); animation:spin 2s infinite alternate; } @keyframes spin{ 0%{transform: scale(0.5),translate:30px} 50%{transform: scale(0.6)} } .laststar{ position: absolute; top: 46%; right: 50%; width: 100%; height: 100%; transform: scale(0.5); background: url('https://cdn.discordapp.com/attachments/798209417455206421/809083652779933715/klipartz.com.png') no-repeat; z-index: -1; } </style> <script> </script>