yiqiu/BlackFruit-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 官网顶部导航栏胶囊高亮效果
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- 去掉 border-bottom: 2px solid 蓝色底线
- 改为 background: rgba(255,255,255,0.08) 半透明圆角背景
- 加 border-radius: 8px 胶囊形状
- 平滑 0.2s 过渡
This commit is contained in:
yiqiu
2026-03-19 20:45:54 +08:00
parent f354a113b1
commit 22d63e5be5
2 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
common/common.css
View File

@@ -120,16 +120,19 @@ body {
display: flex; display: flex;
align-items: center; align-items: center;
height: 56px; height: 56px;
padding: 0 20px; padding: 0 16px;
margin: 0 2px;
font-size: 15px; font-size: 15px;
cursor: pointer; cursor: pointer;
border-bottom: 2px solid transparent; border-bottom: none;
transition: color 0.2s ease; border-radius: 8px;
transition: color 0.2s ease, background 0.2s ease;
} }
.nav-menu .nav-item:hover { .nav-menu .nav-item:hover {
color: #fff; color: #fff;
border-bottom: 2px solid rgba(59, 130, 246, 0.8); background: rgba(255, 255, 255, 0.08);
border-bottom: none;
} }

8
css/common.css
View File

@@ -94,12 +94,14 @@ header:hover {
/* 导航文字颜色 */ /* 导航文字颜色 */
.nav-menu .nav-item { .nav-menu .nav-item {
color: #E5E7EB; color: #E5E7EB;
border-bottom-color: transparent; border-bottom: none;
border-radius: 8px;
} }
.nav-menu .nav-item:hover { .nav-menu .nav-item:hover {
color: #38BDF8; color: #fff;
border-bottom-color: #38BDF8; background: rgba(255, 255, 255, 0.08);
border-bottom: none;
} }
.nav-right .control { .nav-right .control {