QE Team P’New (D)
✨ Pimmada Krunsungnoen
<html> <head> <title>Let's Start </title> <style> * { margin: 0; padding: 0; } body{ background:#000 url(https://i.imgur.com/x6YFaW2.png)repeat top center; } header { background-color:rgba(33, 33, 33, 0.9); color:#ffffff; display:block; height:50px; position:relative; z-index:5; } @keyframes move-twink-back { from {background-position:0 0;} to {background-position:-10000px 5000px;} } .stars, .twinkling{ position:absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; display:block; } .stars { background:url(https://i.imgur.com/6OydWJN.png) ; z-index:1; animation: animate 100s linear infinite; position: absolute; } .twinkling{ background:transparent url(https://i.imgur.com/lEr27X1.png) repeat top center; z-index:3; animation:move-twink-back 200s linear infinite; } @keyframes animate { 0%{top: 0%} 100%{top: 100%} } .astro{ background:url(https://i.imgur.com/xxsxHus.png); background-repeat:no-repeat; background-size:20%; position:absolute; top:50%; left:50%; right:0; bottom:0; /* width:100px; height:100px; */ /* display:block; */ z-index:4; animation: updown 2s alternate infinite; } @keyframes updown{ 0%{top:50%} 100%{top:60%} } .powder{ background:url(https://i.imgur.com/yrJsmgR.png); background-repeat:no-repeat; background-size:50%; position:absolute; top:50%; left:40%; right:0; bottom:0; /* width:100px; height:100px; */ /* display:block; */ z-index:5; /* animation: updown 2s alternate infinite; */ } .sat{ background:url(https://i.imgur.com/MvkBWZ0.png); background-repeat:no-repeat; background-size:30%; position:absolute; top:10%; left:80%; right:0%; bottom:0; z-index:5; } .rocket{ background:url(https://i.imgur.com/58pK6Yu.png); background-repeat:no-repeat; background-size:10%; position:absolute; top:20%; left:20%; right:0; bottom:0; z-index:5; animation: mun 10s linear infinite; } @keyframes mun{ from{transform: rotate(0deg)} to{transform: rotate(360deg)} } </style> </head> <body> <div class="stars"></div> <div class="stardown"></div> <div class="twinkling"></div> <div class="astro"></div> <div class="powder"></div> <div class="sat"></div> <div class="rocket"></div> </body> </html>