liuyu/nofx
1
0
Fork 0
mirror of https://github.com/NoFxAiOS/nofx.git synced 2026-07-11 23:07:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: improve landing page responsiveness and styling

Browse Source
This commit is contained in:
tinkle-community
2026-01-03 13:12:25 +08:00
parent 7f7c4ea2a7
commit 04141642a5
7 changed files with 206 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

96
web/src/index.css
View File

@@ -846,4 +846,100 @@ tr:hover {
.stat-card {
padding: 1rem;
}
}
/* Holographic Character Effects - Premium Polish */
@keyframes holo-shift {
0% {
background-position: 0% 50%;
filter: hue-rotate(0deg) contrast(1);
}
50% {
background-position: 100% 50%;
filter: hue-rotate(15deg) contrast(1.1);
}
100% {
background-position: 0% 50%;
filter: hue-rotate(0deg) contrast(1);
}
}
@keyframes holo-flicker {
0%,
100% {
opacity: 0.7;
}
5% {
opacity: 0.8;
}
10% {
opacity: 0.7;
}
}
.animate-holo {
background-size: 200% 200%;
animation: holo-shift 8s ease infinite, holo-flicker 4s infinite;
}
/* Mobile Breathing Animation */
@keyframes holo-breath {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.02);
}
}
.animate-breath-mobile {
animation: none;
}
@media (max-width: 768px) {
.animate-breath-mobile {
animation: holo-breath 4s ease-in-out infinite;
}
/* Optimize premium effects for mobile */
.char-premium-effects {
filter:
drop-shadow(0 0 1px rgba(240, 185, 11, 0.6)) drop-shadow(0 0 1px rgba(0, 240, 255, 0.5));
}
}
.holo-overlay {
/* Complex gradient + noise for texture */
background:
url('https://grainy-gradients.vercel.app/noise.svg'),
conic-gradient(from 0deg at 50% 50%,
rgba(240, 185, 11, 0.1) 0deg,
rgba(0, 240, 255, 0.1) 120deg,
rgba(240, 185, 11, 0.1) 240deg,
rgba(240, 185, 11, 0.1) 360deg);
mix-blend-mode: overlay;
background-blend-mode: overlay, normal;
}
/* Chromatic Aberration & Rim Light */
.char-premium-effects {
filter:
/* Rim Light (Gold/Cyan) */
drop-shadow(0 0 1px rgba(240, 185, 11, 0.8)) drop-shadow(0 0 2px rgba(0, 240, 255, 0.6))
/* Chromatic Aberration */
drop-shadow(-2px 0 0 rgba(255, 0, 0, 0.3)) drop-shadow(2px 0 0 rgba(0, 255, 255, 0.3));
transition: filter 0.3s ease;
}
.char-premium-effects:hover {
filter:
drop-shadow(0 0 2px rgba(240, 185, 11, 1)) drop-shadow(0 0 5px rgba(0, 240, 255, 0.8)) drop-shadow(-3px 0 0 rgba(255, 0, 0, 0.4)) drop-shadow(3px 0 0 rgba(0, 255, 255, 0.4));
}