优化Logo显示效果,添加亮化和悬停阴影效果
This commit is contained in:
@@ -23,8 +23,7 @@ function App() {
|
|||||||
<img
|
<img
|
||||||
src={freestyleLogo}
|
src={freestyleLogo}
|
||||||
alt="TuringFlow logo"
|
alt="TuringFlow logo"
|
||||||
className="h-12 w-auto object-contain filter drop-shadow-[0_0_20px_rgba(0,212,255,0.3)]
|
className="h-12 w-auto object-contain logo-invert"
|
||||||
hover:drop-shadow-[0_0_30px_rgba(0,212,255,0.5)] transition-all duration-300"
|
|
||||||
/>
|
/>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -159,6 +159,18 @@ html, body, #root {
|
|||||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
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 {
|
.glow-button {
|
||||||
background: linear-gradient(135deg, var(--sa-accent-cyan), var(--sa-accent-blue));
|
background: linear-gradient(135deg, var(--sa-accent-cyan), var(--sa-accent-blue));
|
||||||
|
|||||||
Reference in New Issue
Block a user