zzh/personal-navigation-site
1
0
Fork 0
mirror of https://github.com/handsomezhuzhu/personal-navigation-site.git synced 2026-04-18 22:32:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: animate text-shadow for gradient glow effect

Browse Source 
Text shadow color transitions with cycle: green → blue → purple → dark blue.

Co-authored-by: Simon <85533298+handsomezhuzhu@users.noreply.github.com>
This commit is contained in:
v0
2026-03-07 15:00:48 +00:00
parent 8131a79752
commit 424542c56d
1 changed files with 9 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
app/globals.css
View File

@@ -124,33 +124,18 @@
}
}
/* Cyber gradient flow animation */
@keyframes gradient-flow {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
/* Cyber glow animation - 文字白色，光晕颜色流动 */
@keyframes glow-flow {
0% { text-shadow: 0 0 12px oklch(0.75 0.18 180 / 0.9), 0 0 30px oklch(0.75 0.18 180 / 0.5), 0 0 60px oklch(0.75 0.18 180 / 0.2); }
25% { text-shadow: 0 0 12px oklch(0.70 0.20 220 / 0.9), 0 0 30px oklch(0.70 0.20 220 / 0.5), 0 0 60px oklch(0.70 0.20 220 / 0.2); }
50% { text-shadow: 0 0 12px oklch(0.65 0.22 280 / 0.9), 0 0 30px oklch(0.65 0.22 280 / 0.5), 0 0 60px oklch(0.65 0.22 280 / 0.2); }
75% { text-shadow: 0 0 12px oklch(0.72 0.20 240 / 0.9), 0 0 30px oklch(0.72 0.20 240 / 0.5), 0 0 60px oklch(0.72 0.20 240 / 0.2); }
100% { text-shadow: 0 0 12px oklch(0.75 0.18 180 / 0.9), 0 0 30px oklch(0.75 0.18 180 / 0.5), 0 0 60px oklch(0.75 0.18 180 / 0.2); }
}
.cyber-title {
background: linear-gradient(
90deg,
oklch(0.75 0.12 180),
oklch(0.7 0.15 220),
oklch(0.65 0.18 280),
oklch(0.7 0.15 320),
oklch(0.75 0.12 180)
);
background-size: 300% 100%;
animation: gradient-flow 6s ease infinite;
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: oklch(0.98 0 0);
animation: glow-flow 6s ease infinite;
}
/* Animation utilities */