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

Update index.html

Browse source 
new shooting star
This commit is contained in:
Paweł Orzech 2025-06-28 03:03:21 +02:00
parent aae23ea918
commit d5cae0bbcd
1 changed files with 33 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

39
index.html
View file

@ -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; }
}