博客更新毛玻璃效果(适配移动端)

你需要准备的#

一个high iQ的脑子，遇到问题会问AI
要有一点点的编程基础
安装Node.js
注册github账号
安装一个源代码编辑器像visual studio code

正式开始#

部署Fuwari博客：https://ygdsndblog.netlify.app/posts/fuwari
在根目录的 src 文件夹中，找到 styles文件夹，再用源代码编辑器打开main.css文件
在main.css代码中添加这一段代码

[!tip] 添加在最后一行

1
/* 导航栏毛玻璃 - 保留原有效果 */
2
#navbar-wrapper {
3
position: fixed !important;
4
top: 2px !important;
5
left: 50% !important;
6
transform: translateX(-50%) !important;
7
z-index: 99999 !important;
8
width: 90% !important;
9
max-width: 1200px !important;
10
height: 73px !important;
11
border-radius: 36px !important;
12

13
backdrop-filter: blur(4px) !important;
14

15

16

17
pointer-events: initial !important; /* 改回auto，initial是重置所有规则，容易出问题 */
18
}
19

20
/* 浮动面板毛玻璃 - 保留原有效果 */
21
.float-panel,
22
#display-setting,
23
#light-dark-panel .float-panel {
24
background: rgba(255, 255, 255, 0.2) !important;
25
backdrop-filter: blur(8px) !important;
26
-webkit-backdrop-filter: blur(8px) !important;
27
border: 1px solid rgba(255,255,255,0.25) !important;
28
border-radius: 20px !important;
29
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important;
30
}
31
.float-panel *:not(input[type="range"]) {
32
background: transparent !important;
33
}
34
#display-setting input[type="range"].slider {
35
background: var(--color-selection-bar) !important;
36
-webkit-appearance: none !important;
37
appearance: none !important;
38
height: 1.5rem !important; /* 匹配原有高度 */
39
border: none !important;
40
outline: none !important;
41
}
42

43
/* 全站磨砂玻璃效果 一键覆盖 */
44
.widget-layout, /* 你漏了.，补上！否则样式不生效 */
45
.card-base,
46
.astro-auto-article,
47
.float-panel,
48
#toc-wrapper > div {
49
background: rgba(255, 255, 255, 0.2) !important;
50
backdrop-filter: blur(6px) !important;
51
-webkit-backdrop-filter: blur(6px) !important;
52
border: 1px solid rgba(255,255,255,0.2) !important;
53
border-radius: 36px !important;
54
box-shadow: none !important;
55
}
56

57
/* 按钮毛玻璃 */
58
.btn {
59
background: rgba(255,255,255,0.2) !important;
60
backdrop-filter: blur(4px) !important;
61
border: 1px solid rgba(255,255,255,0.2) !important;
62
}
63
:root {
64
 --card-bg: rgba(255, 255, 255, 0.25) !important;
65
}
66

67
/* 暗色模式 */
68
.dark {
69
 --card-bg: rgba(30, 30, 45, 0.35) !important;
70
}
71
.card-base {
72
 backdrop-filter: blur(6px) !important;
73
 -webkit-backdrop-filter: blur(6px) !important;
74
}
75
@media (max-width: 768px) {
76
 .card-base a.group.max-h-\[20vh\] {
77
     max-height: none !important;
78
     aspect-ratio: 4 / 3 !important;
79
     width: calc(100% - 2rem) !important;
80
     display: block !important;
81
     overflow: hidden !important;
82
 }
83

84
 /* 封面内层div */
85
 .card-base a.group.max-h-\[20vh\] .image-wrapper {
86
     width: 100% !important;
87
     height: 100% !important;
88
 }
89

90
 /* 封面图片 */
91
 .card-base a.group.max-h-\[20vh\] img {
92
     width: 100% !important;
93
     height: 100% !important;
94
     object-fit: cover !important;
95
     aspect-ratio: unset !important;
96
 }
97
}
98
@media (max-width: 768px) {
99
 div.flex.flex-col.rounded-\[var\(--radius-large\)\].bg-\[var\(--card-bg\)\].py-1 {
100
     background: transparent !important;
101
     backdrop-filter: none !important;
102
     -webkit-backdrop-filter: none !important;
103
     border: none !important;
104
     box-shadow: none !important;
105
 }
106
}
107
@media (max-width: 768px) {
108
 #navbar .card-base {
109
     background: transparent !important;
110
     backdrop-filter: none !important;
111
     -webkit-backdrop-filter: none !important;
112
     border: none !important;
113
     box-shadow: none !important;
114
 }
115
}

自行调节

1
/* 顶部导航栏整体容器样式 */
2
#navbar-wrapper {
3
position: fixed !important; /* 固定定位悬浮页面 */
4
top: 2px !important; /* 距离顶部2px */
5
left: 50% !important; /* 向左居中定位起点 */
6
transform: translateX(-50%) !important; /* 水平居中对齐 */
7
z-index: 99999 !important; /* 最高层级防止被遮挡 */
8
width: 90% !important; /* 导航栏宽度占比 */
9
max-width: 1200px !important; /* 桌面端最大宽度限制 */
10
height: 73px !important; /* 导航栏固定高度 */
11
border-radius: 36px !important; /* 超大圆角圆润外观 */
12

13
backdrop-filter: blur(4px) !important; /* 基础毛玻璃模糊效果 */
14

15
pointer-events: initial !important; /* 鼠标事件正常生效 */
16
}
17

18
/* 全局浮动弹窗/设置面板 毛玻璃样式 */
19
.float-panel,
20
#display-setting,
21
#light-dark-panel .float-panel {
22
background: rgba(255, 255, 255, 0.2) !important; /* 浅色半透明底色 */
23
backdrop-filter: blur(8px) !important; /* 高强度毛玻璃模糊 */
24
-webkit-backdrop-filter: blur(8px) !important; /* 兼容webkit内核浏览器 */
25
border: 1px solid rgba(255,255,255,0.25) !important; /* 浅色细边框提亮 */
26
border-radius: 20px !important; /* 弹窗圆角大小 */
27
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1) !important; /* 轻微投影增加层次 */
28
}
29
/* 浮动面板内部除滑动条外全部透明背景 */
30
.float-panel *:not(input[type="range"]) {
31
background: transparent !important;
32
}
33
/* 页面设置里的进度滑块自定义样式 */
34
#display-setting input[type="range"].slider {
35
background: var(--color-selection-bar) !important; /* 调用主题选中色 */
36
-webkit-appearance: none !important; /* 清除浏览器默认滑块样式 */
37
appearance: none !important;
38
height: 1.5rem !important; /* 滑块高度 */
39
border: none !important; /* 去除边框 */
40
outline: none !important; /* 去除选中外边框 */
41
}
42

43
/* 全站通用磨砂玻璃效果 统一套用元素 */
44
.widget-layout, /* 页面布局容器 */
45
.card-base, /* 基础卡片组件 */
46
.astro-auto-article, /* 文章内容模块 */
47
.float-panel, /* 浮动面板 */
48
#toc-wrapper > div /* 侧边目录容器 */
49
{
50
background: rgba(255, 255, 255, 0.2) !important; /* 统一半透明白底 */
51
backdrop-filter: blur(6px) !important; /* 中等强度毛玻璃 */
52
-webkit-backdrop-filter: blur(6px) !important; /* 浏览器兼容 */
53
border: 1px solid rgba(255,255,255,0.2) !important; /* 通透细边框 */
54
border-radius: 36px !important; /* 统一大圆角 */
55
box-shadow: none !important; /* 取消默认阴影 */
56
}
57

58
/* 页面通用按钮毛玻璃样式 */
59
.btn {
60
background: rgba(255,255,255,0.2) !important; /* 按钮半透明底色 */
61
backdrop-filter: blur(4px) !important; /* 轻度模糊 */
62
border: 1px solid rgba(255,255,255,0.2) !important; /* 按钮细边框 */
63
}
64

65
/* 全局CSS变量定义 亮色模式卡片底色 */
66
:root {
67
  --card-bg: rgba(255, 255, 255, 0.25) !important;
68
}
69

70
/* 深色模式全局变量 深色卡片底色 */
71
.dark {
72
  --card-bg: rgba(30, 30, 45, 0.35) !important;
73
}
74

75
/* 重复加固卡片毛玻璃兼容 */
76
.card-base {
77
  backdrop-filter: blur(6px) !important;
78
  -webkit-backdrop-filter: blur(6px) !important;
79
}
80

81
/* 移动端适配 屏幕宽度768px及以下生效 */
82
@media (max-width: 768px) {
83
  /* 移动端文章封面卡片布局调整 */
84
  .card-base a.group.max-h-\[20vh\] {
85
      max-height: none !important; /* 取消最大高度限制 */
86
      aspect-ratio: 4 / 3 !important; /* 固定图片4:3比例 */
87
      width: calc(100% - 2rem) !important; /* 左右预留边距 */
88
      display: block !important; /* 块状居中显示 */
89
      overflow: hidden !important; /* 超出内容隐藏 */
90
  }
91

92
  /* 封面内层容器铺满父级 */
93
  .card-base a.group.max-h-\[20vh\] .image-wrapper {
94
      width: 100% !important;
95
      height: 100% !important;
96
  }
97

98
  /* 封面图片铺满裁切适配 */
99
  .card-base a.group.max-h-\[20vh\] img {
100
      width: 100% !important;
101
      height: 100% !important;
102
      object-fit: cover !important; /* 等比裁切不变形 */
103
      aspect-ratio: unset !important; /* 取消自带比例 */
104
  }
105
}
106

107
/* 移动端清除多余嵌套毛玻璃避免重叠模糊 */
108
@media (max-width: 768px) {
109
  div.flex.flex-col.rounded-\[var<span data-type="inline-math" data-value="LS1yYWRpdXMtbGFyZ2U="></span>\].bg-\[var<span data-type="inline-math" data-value="LS1jYXJkLWJn"></span>\].py-1 {
110
      background: transparent !important; /* 清空背景 */
111
      backdrop-filter: none !important; /* 关闭毛玻璃 */
112
      -webkit-backdrop-filter: none !important;
113
      border: none !important; /* 去除边框 */
114
      box-shadow: none !important; /* 去除阴影 */
115
  }
116
}
117

118
/* 移动端导航栏内卡片取消毛玻璃 */
119
@media (max-width: 768px) {
120
  #navbar .card-base {
121
      background: transparent !important;
122
      backdrop-filter: none !important;
123
      -webkit-backdrop-filter: none !important;
124
      border: none !important;
125
      box-shadow: none !important;
126
  }
127
}

完成！#

恭喜你完成了！赶紧pnpm dev测试下吧！如果没有问题，可否评论支持下呢？😃