I followed a tutorial on a video at this link: https://www.youtube.com/watch?v=mAewuQPMFI8&t=106s
@charset "utf-8";
*
{
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.50);
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::before
{
content: '';
position: absolute;
bottom: -200px;
left: 50px;
transform: translateX(-50px);
width: 10px;
height: 200px;
background: linear-gradient(#00d0ff,transparent);
}
.scene .rocket::after
{
content: '';
position: absolute;
bottom: -200px;
left: 50px;
transform: translateX(-50px);
width: 10px;
height: 200px;
background: linear-gradient(#00d0ff,transparent);
filter: blur(20px);
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Rocket Animation Effect</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="scene" >
<div class="rocket">
<img src="rocket.png" width="72" height="99" alt=""/>
</div>
</div>
<script>
function star() {
let count = 50;
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 = h 'px';
star.style.animationDuration = duration + 's';
scene.appendChild(star);
i++
}
}
</script>
</body>
</html>The rocket animation code I tried to implement was supposed to display a flying rocket controlled by the mouse pointer. However, it did not turn out as expected based on the tutorial. If anyone can help me identify what went wrong, I would greatly appreciate it.
Thank you in advance for any assistance provided.