qBbYBJJ

index.html

<div class="scene">
	<div class="rocket">
		<img src="https://icons.iconarchive.com/icons/roundicons/100-free-solid/512/rocket-icon.png" alt="">
	</div>
</div>

qbbybjj.markdown

qBbYBJJ

A Pen by Hakkam Abdullah on CodePen.

License.

script.js

function stars() {
	let count = 20;
	let scene = document.querySelector(".scene");
	let i = 0;
	while (i < count) {
		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 = 10 + h + "px";
		star.style.animationDuration = duration + "s";

		scene.appendChild(star);
		i++;
	}
}
stars();

style.css

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.scene {
	position: relative;
	width: 100%;
	height: 100vh;
	background: #01070a;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
}

.scene i {
	position: absolute;
	top: -250px;
	background: rgba(255, 255, 255, 0.5);
	animation: animateStars linear infinite;
}

@keyframes animateStars {
	0% {
		transform: translateY(0);
	}

	100% {
		transform: translateY(200vh);
	}
}
.scene .rocket {
	position: relative;
	animation: animate 0.2s ease infinite;
}

@keyframes animate {
	0%,
	100& {
		transform: translateY(-2px);
	}
	50% {
		transform: translateY(2px);
	}
}
.scene .rocket img{
	filter:invert(100%);
	max-width:100px;
}
.scene .rocket:before {
	content: "";
	position: absolute;
	bottom: -200px;
	left: 50%;
	transform: translateX(-50%);
	width: 10px;
	height: 200px;
	background: linear-gradient(#00d0ff, transparent);
}
.scene .rocket:after {
	content: "";
	position: absolute;
	bottom: -200px;
	left: 50%;
	transform: translateX(-50%);
	width: 10px;
	height: 200px;
	background: linear-gradient(#00d0ff, transparent);
	filter: blur(20px);
}