优化Logo显示效果,添加亮化和悬停阴影效果

This commit is contained in:
“dongming”
2025-12-06 19:19:42 +08:00
parent 838ed757cd
commit 4c8de14e0e
2 changed files with 13 additions and 2 deletions

View File

@@ -23,8 +23,7 @@ function App() {
<img
src={freestyleLogo}
alt="TuringFlow logo"
className="h-12 w-auto object-contain filter drop-shadow-[0_0_20px_rgba(0,212,255,0.3)]
hover:drop-shadow-[0_0_30px_rgba(0,212,255,0.5)] transition-all duration-300"
className="h-12 w-auto object-contain logo-invert"
/>
</a>
</div>

View File

@@ -159,6 +159,18 @@ html, body, #root {
inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
/* Logo 图片亮化效果 - 将深色logo转为亮色 */
.logo-invert {
filter: brightness(0) invert(1);
opacity: 0.9;
transition: all 0.3s ease;
}
.logo-invert:hover {
opacity: 1;
filter: brightness(0) invert(1) drop-shadow(0 0 20px rgba(0, 212, 255, 0.6));
}
/* 发光按钮 */
.glow-button {
background: linear-gradient(135deg, var(--sa-accent-cyan), var(--sa-accent-blue));