Rocket Animation
Home
Snippets
Rocket Animation
HTML
CSS
JS
<div class="scene"> <div class="rocket"> <img src="https://i.postimg.cc/QtdPrSsD/rocket.png"> </div> </div>
*{ margin:0; padding:0; box-sizing:border-box; } .scene{ position:relative; width:100%; height:100vh; overflow:hidden; display:flex; justify-content:center; align-items:center; background-color:#151515; .rocket{ position:relative; animation:animate .2s ease infinite; &::after{ content:''; position:absolute; bottom:-200px; left:50%; transform:translateX(-50%); width:10px; height:200px; background:linear-gradient(#00d0ff, transparent) } } i{ position:absolute; top:-200px; background-color:rgba(255, 255, 255, .5); animation:animateStars linear infinite; } } @keyframes animate{ 0%{ transform:translateY(2px); } 100%{ transform:translateY(-2px); } } @keyframes animateStars{ 0%{ transform:translateY(0); } 100%{ transform:translateY(200vh); } }
const stars = () => { let scene = document.querySelector('.scene'); let count = 20; let i = 0; for (i = 0; i <= count; i++) { let star = document.createElement('i'); let x = Math.floor(Math.random() * window.innerWidth); let duration = Math.random() * 1; let h = Math.random() * 100; star.style.left = x + 'px'; star.style.width = 1 + 'px'; star.style.height = h + 'px'; star.style.animationDuration = duration + 's'; scene.appendChild(star); } } stars();
Ad #1
Ad #2
Scroll to Top