diff --git a/index.html b/index.html index b80587e..d96197e 100644 --- a/index.html +++ b/index.html @@ -146,35 +146,11 @@ filter: blur(0.5px); /* Slight blur for softness */ animation: shoot 2s linear forwards; pointer-events: none; - transform-origin: 0% 0%; /* Important for animation */ - z-index: 2; /* Ensure head is above tail */ - box-shadow: 0 0 8px 4px rgba(255, 165, 0, 0.7); /* Fiery glow around head */ + transform-origin: center center; /* Center of the head */ + z-index: 2; /* Ensure head is above trail */ } - .shooting-star::after { - content: ''; - position: absolute; - /* Position relative to the head, extending backwards */ - top: 0; - left: 0; - width: 60px; /* Length of the trail */ - height: 4px; /* Thickness of the trail */ - background: linear-gradient(to right, rgba(255, 69, 0, 0), rgba(255, 165, 0, 0.8) 20%, rgba(255, 215, 0, 0.5) 60%, rgba(150, 150, 150, 0.1) 90%, rgba(0, 0, 0, 0)); /* Fiery gradient with subtle smoke */ - filter: blur(1px); - border-radius: 50%; /* To make the end of the trail rounded */ - z-index: 1; /* Ensure tail is behind head */ - /* Rotate and translate to position the tail correctly behind the head */ - transform: rotate(-45deg) translate(-100%, 0); /* Rotate for diagonal movement, translate to position behind */ - transform-origin: 100% 50%; /* Rotate around the right end of the tail */ - opacity: 1; /* Start fully opaque */ - animation: trail-fade 2s linear forwards; /* Fade out the trail */ - } - - /* New keyframes for the trail fade */ - @keyframes trail-fade { - 0% { opacity: 1; } - 100% { opacity: 0; } - } +