- 顶部时完全透明 - 滚动 >10px 后渐变为半透明毛玻璃 (0.75 透明度 + blur) - CSS transition 平滑过渡
This commit is contained in:
@@ -76,11 +76,19 @@ body {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
z-index: 9999;
|
||||
/* 深色毛玻璃 Header,与下拉菜单统一风格 */
|
||||
background: rgba(10, 12, 22, 0.92);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
|
||||
background: transparent;
|
||||
backdrop-filter: none;
|
||||
-webkit-backdrop-filter: none;
|
||||
box-shadow: none;
|
||||
transition: background 0.3s ease, backdrop-filter 0.3s ease, box-shadow 0.3s ease;
|
||||
}
|
||||
|
||||
/* 滚动后变半透明毛玻璃 */
|
||||
.nav-shadow.scrolled {
|
||||
background: rgba(10, 12, 22, 0.75);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
.nav-header {
|
||||
|
||||
Reference in New Issue
Block a user