优化Logo显示效果,添加亮化和悬停阴影效果
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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));
|
||||
|
||||
Reference in New Issue
Block a user