pawelorzech/orzech.me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update index.html

Browse source 
better shooting star
This commit is contained in:
Paweł Orzech 2025-06-28 03:10:32 +02:00
parent d5cae0bbcd
commit d11555c4e4
1 changed files with 3 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
index.html
View file

@ -146,35 +146,11 @@
filter: blur(0.5px); /* Slight blur for softness */ filter: blur(0.5px); /* Slight blur for softness */
animation: shoot 2s linear forwards; animation: shoot 2s linear forwards;
pointer-events: none; pointer-events: none;
transform-origin: 0% 0%; /* Important for animation */ transform-origin: center center; /* Center of the head */
z-index: 2; /* Ensure head is above tail */ z-index: 2; /* Ensure head is above trail */
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; }
}