Refactor birthday, olympia, space, and sports animations; enhance symbol management and visual effects
- Updated birthday.js to improve balloon visuals and confetti effects, including new color schemes and enhanced pop animations. - Removed legacy fallback logic in olympia.js and improved image error handling. - Enhanced space.js with configurable counts for planets, astronauts, satellites, ISS, and rockets; improved shooting star animations and added random image swapping. - Simplified sports.js by removing legacy emoji fallback logic and optimizing ball creation based on selected categories. - Adjusted CSS styles across birthday, olympia, space, and sports for better visual consistency and performance. [skip ci]
This commit is contained in:
@@ -36,18 +36,19 @@
|
||||
position: absolute;
|
||||
width: 250px;
|
||||
height: 3px;
|
||||
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
|
||||
background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
|
||||
border-radius: 50%;
|
||||
animation: space-shoot 8s linear infinite;
|
||||
animation: space-shoot 25s linear infinite;
|
||||
opacity: 0;
|
||||
z-index: 12;
|
||||
}
|
||||
|
||||
@keyframes space-shoot {
|
||||
0% { left: var(--shoot-start-x); top: var(--shoot-start-y); opacity: 1; width: 0; }
|
||||
5% { width: 300px; }
|
||||
15% { left: var(--shoot-end-x); top: var(--shoot-end-y); opacity: 0; width: 0; }
|
||||
100% { left: var(--shoot-end-x); top: var(--shoot-end-y); opacity: 0; width: 0; }
|
||||
0% { transform: rotate(var(--shoot-angle)) translateX(0); opacity: 0; }
|
||||
5% { opacity: 1; }
|
||||
35% { opacity: 1; }
|
||||
40% { transform: rotate(var(--shoot-angle)) translateX(var(--shoot-distance)); opacity: 0; }
|
||||
100% { transform: rotate(var(--shoot-angle)) translateX(var(--shoot-distance)); opacity: 0; }
|
||||
}
|
||||
|
||||
.space-symbol {
|
||||
@@ -69,24 +70,30 @@
|
||||
}
|
||||
|
||||
/* Specific elements scaling */
|
||||
.space-planet1, .space-planet2 { font-size: 4rem; }
|
||||
.space-planet1 img, .space-planet2 img { width: 8vh; max-width: 80px; }
|
||||
.space-star { font-size: 2rem; opacity: 0.6; }
|
||||
.space-star img { width: 3vh; max-width: 30px; }
|
||||
.space-planet img { width: 8vh; max-width: 80px; }
|
||||
.space-astronaut img { width: 10vh; max-width: 100px; }
|
||||
.space-satellite img { width: 12vh; max-width: 120px; }
|
||||
.space-iss img { width: 25vh; max-width: 180px; }
|
||||
.space-rocket img { width: 12vh; max-width: 120px; }
|
||||
|
||||
@keyframes space-drift-right {
|
||||
0% { transform: translateX(-10vw) translateY(0) scaleX(-1); }
|
||||
50% { transform: translateX(50vw) translateY(-5vh) scaleX(-1); }
|
||||
100% { transform: translateX(110vw) translateY(0) scaleX(-1); }
|
||||
50% { transform: translateX(60vw) translateY(-30vh) scaleX(-1); }
|
||||
100% { transform: translateX(140vw) translateY(0) scaleX(-1); }
|
||||
}
|
||||
|
||||
@keyframes space-drift-left {
|
||||
0% { transform: translateX(10vw) translateY(0); }
|
||||
50% { transform: translateX(-50vw) translateY(5vh); }
|
||||
100% { transform: translateX(-110vw) translateY(0); }
|
||||
50% { transform: translateX(-60vw) translateY(30vh); }
|
||||
100% { transform: translateX(-140vw) translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes space-slow-spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
@keyframes space-star-drift {
|
||||
from { transform: translateY(0); }
|
||||
to { transform: translateY(-100vh); }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user