diff --git a/index.html b/index.html
index 266a470..b80587e 100644
--- a/index.html
+++ b/index.html
@@ -125,28 +125,55 @@
/* Shooting star animation */
@keyframes shoot {
0% {
- transform: translate(0, 0) scale(0.5);
+ transform: translate(0, 0);
opacity: 0;
}
10% {
opacity: 1;
}
100% {
- transform: translate(200px, 200px) scale(1);
+ transform: translate(200px, 200px);
opacity: 0;
}
}
.shooting-star {
position: absolute;
- width: 4px;
+ width: 4px; /* Small, round head */
height: 4px;
- background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8));
+ background-color: #FFD700; /* Gold-like color for the core */
border-radius: 50%;
- filter: blur(1px);
+ filter: blur(0.5px); /* Slight blur for softness */
animation: shoot 2s linear forwards;
pointer-events: none;
- transform-origin: 0% 0%;
+ 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 */
+ }
+
+ .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; }
}