Naposledy aktivní 1725433689

设置了部分半透明,不过被注释了,请自行打开

LiuShen's Avatar LiuShen revidoval tento gist 1725433689. Přejít na revizi

1 file changed, 295 insertions, 97 deletions

style.css

@@ -1,97 +1,295 @@
1 - /*请自己找到这个位置*/
2 - .volantis-flink-list
3 - display: flex
4 - flex-wrap: wrap
5 - justify-content: flex-start
6 - margin: -0.5 * 16px
7 - align-items: stretch
8 - .site-card
9 - @extend .cardHover
10 - margin: 16px * 0.5
11 - width: "calc(100% / 4 - %s)" % 16px
12 - @media screen and (min-width: 2048px)
13 - width: "calc(100% / 5 - %s)" % 16px
14 - @media screen and (max-width: 768px)
15 - width: "calc(100% / 3 - %s)" % 16px
16 - @media screen and (max-width: 500px)
17 - width: "calc(100% / 2 - %s)" % 16px
18 - display: block
19 - height: 210px !important
20 - line-height: 1.4
21 - height 100%
22 - .img
23 - position: relative
24 - object-fit: cover
25 - margin: 0 !important
26 - width: 100%
27 - height 60%
28 - overflow: hidden
29 - transition: all .6s!important
30 - filter: blur(0)
31 - img
32 - width: 100%
33 - height 100%
34 - margin: 0 !important
35 - border-radius: 12px 12px 0 0 !important
36 - pointer-events:none;
37 - // trans(.75s)
38 - transition: background .6s,height .6s
39 - object-fit: cover
40 -
41 - .info
42 - position: relative
43 - height: 40%
44 - transition: background .6s,height .6s
45 - img
46 - position: absolute
47 - width: 100px
48 - height: 100px
49 - pointer-events:none
50 - background-size: cover
51 - border-radius: 50% !important
52 - top: -32px
53 - left: -32px
54 - transform: scale(.2)
55 - transition: all .6s !important
56 - #text
57 - position: relative
58 - top: 0px
59 - display: flex
60 - flex-direction: column
61 - padding-right: 10px
62 - margin-left: 35px
63 - transition: all .6s;
64 - .title
65 - max-width: 100%
66 - font-size: 16px
67 - line-height: 26px
68 - font-weight: 700
69 - color: var(--liushen-text)
70 - text-overflow: ellipsis
71 - white-space: nowrap
72 - overflow: hidden
73 - .desc
74 - font-size: var(--global-font-size)
75 - line-height: 26px
76 - color: var(--liushen-secendtext)
77 - overflow: hidden
78 - font-size: small
79 - margin-bottom: 10px
80 - max-height: 52px
81 - -webkit-line-clamp: 2
82 - &:hover
83 - .img
84 - height: 35%
85 - filter: blur(3px)
86 - .info
87 - height: 66%
88 - background: #f2b94b
89 - color: #fff
90 - img
91 - left: -10px
92 - top: -50px
93 - transform: rotate(-35deg) rotateX(1turn) rotateY(1turn) scale(.6)
94 - #text
95 - top: 26px
96 - margin-left: 10px
97 - /*下面的不用动,为#article-container的定义*/
1 + /* #card-newest-comments img {border-radius: 10px; /* 设置最新评论圆角半径为10px,可以根据需要调整} */
2 +
3 + /* 说说轮播 */
4 + #bber-talk {
5 + background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
6 + rgba(255, 255, 255, .8),
7 + rgba(255, 255, 255, .8),
8 + rgba(255, 255, 255, .7));
9 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
10 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
11 + }
12 +
13 + /* 说说轮播 */
14 + [data-theme=dark] #bber-talk {
15 + background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
16 + rgba(35, 37, 58, .8),
17 + rgba(35, 37, 58, .8),
18 + rgba(24, 40, 72, .7));
19 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
20 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
21 + }
22 +
23 + /* 侧边栏个人信息卡片动态渐变色 */
24 + #aside-content>.card-widget.card-info {
25 + position: relative;
26 + z-index: 1; /* 确保原内容在上层显示 */
27 + background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
28 + rgba(255, 255, 255, .8),
29 + rgba(255, 255, 255, .8),
30 + rgba(255, 255, 255, .7));
31 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
32 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
33 + }
34 +
35 + #aside-content > .card-widget.card-info::before {
36 + content: "";
37 + position: absolute;
38 + top: 0;
39 + left: 0;
40 + width: 100%;
41 + height: 100%;
42 + background: linear-gradient(to bottom,
43 + rgba(255, 255, 255, 0.0),
44 + rgba(255, 255, 255, 0.3),
45 + rgba(255, 255, 255, 0.6),
46 + rgba(255, 255, 255, 0.7)),
47 + url('/config/img/dog.jpg'); /* 鼠标悬停时显示的背景图片 */
48 + background-size: cover;
49 + background-repeat: no-repeat;
50 + opacity: 0.5;
51 + transition: opacity 0.8s; /* 过渡效果持续时间 */
52 + z-index: -1;
53 + }
54 +
55 + [data-theme=dark] #aside-content > .card-widget.card-info::before {
56 + background: linear-gradient(to bottom,
57 + rgba(24, 40, 72, .1),
58 + rgba(35, 37, 58, .3),
59 + rgba(35, 37, 58, .6),
60 + rgba(24, 40, 72, .7)),
61 + url('/config/img/dog.jpg'); /* 鼠标悬停时显示的背景图片 */
62 + background-size: cover;
63 + background-repeat: no-repeat;
64 + }
65 +
66 + #aside-content > .card-widget.card-info:hover::before {
67 + opacity: 1;
68 + }
69 + /* 卡片动态效果,好好看哈哈 */
70 + #aside-content div.card-widget.card-info .avatar-img {
71 + transition: opacity 0.3s ease; /* 添加渐变效果 */
72 + }
73 +
74 + #aside-content div.card-widget.card-info .avatar-img:hover {
75 + opacity: 0; /* 鼠标移上去时完全透明 */
76 + }
77 +
78 + #card-info-btn:hover, #card-info-btn:hover .icon, #card-info-btn:hover span {
79 + transform: scale(1.1); /* 鼠标悬停时放大到110% */
80 + }
81 +
82 + [data-theme=dark] #aside-content>.card-widget.card-info {
83 + background: linear-gradient(-45deg, rgba(24, 40, 72, .6),
84 + rgba(35, 37, 58, .5),
85 + rgba(35, 37, 58, .5),
86 + rgba(24, 40, 72, .6));
87 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
88 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
89 + }
90 +
91 + /* 侧边栏公告栏卡片渐变色 */
92 + #aside-content>.card-widget.card-announcement {
93 + background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
94 + rgba(255, 255, 255, .8),
95 + rgba(255, 255, 255, .8),
96 + rgba(255, 255, 255, .7));
97 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
98 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
99 + }
100 +
101 + [data-theme=dark] #aside-content>.card-widget.card-announcement {
102 + background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
103 + rgba(35, 37, 58, .8),
104 + rgba(35, 37, 58, .8),
105 + rgba(24, 40, 72, .7));
106 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
107 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
108 + }
109 +
110 + /* 侧边栏目录最新文章卡片渐变色 */
111 + #aside-content>.sticky_layout>.card-widget {
112 + background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
113 + rgba(255, 255, 255, .8),
114 + rgba(255, 255, 255, .8),
115 + rgba(255, 255, 255, .7));
116 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
117 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
118 + }
119 +
120 + [data-theme=dark] #aside-content>.sticky_layout>.card-widget {
121 + background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
122 + rgba(35, 37, 58, .8),
123 + rgba(35, 37, 58, .8),
124 + rgba(24, 40, 72, .7));
125 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
126 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
127 + }
128 +
129 + /* 侧边栏欢迎卡片渐变色 */
130 + #aside-content>.card-widget.welcomeBoxClass {
131 + background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
132 + rgba(255, 255, 255, .8),
133 + rgba(255, 255, 255, .8),
134 + rgba(255, 255, 255, .7));
135 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
136 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
137 + }
138 +
139 + [data-theme=dark] #aside-content>.card-widget.welcomeBoxClass {
140 + background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
141 + rgba(35, 37, 58, .8),
142 + rgba(35, 37, 58, .8),
143 + rgba(24, 40, 72, .7));
144 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
145 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
146 + }
147 +
148 + /* 公告卡片渐变色 */
149 + #recent-posts>#noticeList {
150 + background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
151 + rgba(255, 255, 255, .8),
152 + rgba(255, 255, 255, .8),
153 + rgba(255, 255, 255, .7));
154 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
155 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
156 + }
157 +
158 + [data-theme=dark] #recent-posts>#noticeList {
159 + background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
160 + rgba(35, 37, 58, .8),
161 + rgba(35, 37, 58, .8),
162 + rgba(24, 40, 72, .7));
163 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
164 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
165 + }
166 +
167 + /* 个人信息Follow me按钮 */
168 + #aside-content>.card-widget.card-info>#card-info-btn {
169 + background-color: #3eb8be;
170 + border-radius: 10px;
171 + }
172 +
173 + /*文章页面*/
174 + .layout>#post {
175 + background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
176 + rgba(255, 255, 255, .8),
177 + rgba(255, 255, 255, .8),
178 + rgba(255, 255, 255, .7));
179 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
180 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
181 + }
182 +
183 + [data-theme=dark] .layout>#post {
184 + background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
185 + rgba(35, 37, 58, .8),
186 + rgba(35, 37, 58, .8),
187 + rgba(24, 40, 72, .7));
188 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
189 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
190 + }
191 +
192 + /*主页文章预览页面*/
193 + #recent-posts>.recent-post-item {
194 + background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
195 + rgba(255, 255, 255, .8),
196 + rgba(255, 255, 255, .8),
197 + rgba(255, 255, 255, .7));
198 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
199 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
200 + }
201 +
202 + [data-theme=dark] #recent-posts>.recent-post-item {
203 + background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
204 + rgba(35, 37, 58, .8),
205 + rgba(35, 37, 58, .8),
206 + rgba(24, 40, 72, .7));
207 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
208 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
209 + }
210 +
211 + /*分类页面*/
212 + .layout>#page {
213 + background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
214 + rgba(255, 255, 255, .8),
215 + rgba(255, 255, 255, .8),
216 + rgba(255, 255, 255, .7));
217 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
218 + /* -webkit-backdrop-filter: blur(10px); 兼容性前缀,适用于一些旧版本的浏览器 */
219 + }
220 +
221 + [data-theme=dark] .layout>#page {
222 + background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
223 + rgba(35, 37, 58, .8),
224 + rgba(35, 37, 58, .8),
225 + rgba(24, 40, 72, .7));
226 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
227 + /* -webkit-backdrop-filter: blur(10px); 兼容性前缀,适用于一些旧版本的浏览器 */
228 + }
229 +
230 +
231 + /*时间轴页面*/
232 + .layout>#archive {
233 + background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
234 + rgba(255, 255, 255, .8),
235 + rgba(255, 255, 255, .8),
236 + rgba(255, 255, 255, .7));
237 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
238 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
239 + }
240 +
241 + [data-theme=dark] .layout>#archive {
242 + background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
243 + rgba(35, 37, 58, .8),
244 + rgba(35, 37, 58, .8),
245 + rgba(24, 40, 72, .7));
246 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
247 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
248 + }
249 +
250 + /*分类点进去的页面*/
251 + .layout>#category {
252 + background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
253 + rgba(255, 255, 255, .8),
254 + rgba(255, 255, 255, .8),
255 + rgba(255, 255, 255, .7));
256 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
257 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
258 + }
259 +
260 + [data-theme=dark] .layout>#category {
261 + background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
262 + rgba(35, 37, 58, .8),
263 + rgba(35, 37, 58, .8),
264 + rgba(24, 40, 72, .7));
265 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
266 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
267 + }
268 +
269 + /*标签点进去的页面*/
270 + .layout>#tag {
271 + background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
272 + rgba(255, 255, 255, .8),
273 + rgba(255, 255, 255, .8),
274 + rgba(255, 255, 255, .7));
275 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
276 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
277 + }
278 +
279 + [data-theme=dark] .layout>#tag {
280 + background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
281 + rgba(35, 37, 58, .8),
282 + rgba(35, 37, 58, .8),
283 + rgba(24, 40, 72, .7));
284 + /* backdrop-filter: blur(10px); 应用高斯模糊效果,可以根据需要调整模糊程度 */
285 + /* -webkit-backdrop-filter: blur(10px);兼容性前缀,适用于一些旧版本的浏览器 */
286 + }
287 +
288 + .layout.hide-aside {
289 + max-width: 1200px;
290 + }
291 +
292 + /* 设置黑夜的时候,社交按钮为白色 */
293 + [data-theme=dark] .social-icon i {
294 + color: rgba(188, 188, 188) !important; /* 设置为白色 */
295 + }

LiuShen's Avatar LiuShen revidoval tento gist 1725433366. Přejít na revizi

Žádné změny

LiuShen's Avatar LiuShen revidoval tento gist 1725432584. Přejít na revizi

1 file changed, 97 insertions

style.css(vytvořil soubor)

@@ -0,0 +1,97 @@
1 + /*请自己找到这个位置*/
2 + .volantis-flink-list
3 + display: flex
4 + flex-wrap: wrap
5 + justify-content: flex-start
6 + margin: -0.5 * 16px
7 + align-items: stretch
8 + .site-card
9 + @extend .cardHover
10 + margin: 16px * 0.5
11 + width: "calc(100% / 4 - %s)" % 16px
12 + @media screen and (min-width: 2048px)
13 + width: "calc(100% / 5 - %s)" % 16px
14 + @media screen and (max-width: 768px)
15 + width: "calc(100% / 3 - %s)" % 16px
16 + @media screen and (max-width: 500px)
17 + width: "calc(100% / 2 - %s)" % 16px
18 + display: block
19 + height: 210px !important
20 + line-height: 1.4
21 + height 100%
22 + .img
23 + position: relative
24 + object-fit: cover
25 + margin: 0 !important
26 + width: 100%
27 + height 60%
28 + overflow: hidden
29 + transition: all .6s!important
30 + filter: blur(0)
31 + img
32 + width: 100%
33 + height 100%
34 + margin: 0 !important
35 + border-radius: 12px 12px 0 0 !important
36 + pointer-events:none;
37 + // trans(.75s)
38 + transition: background .6s,height .6s
39 + object-fit: cover
40 +
41 + .info
42 + position: relative
43 + height: 40%
44 + transition: background .6s,height .6s
45 + img
46 + position: absolute
47 + width: 100px
48 + height: 100px
49 + pointer-events:none
50 + background-size: cover
51 + border-radius: 50% !important
52 + top: -32px
53 + left: -32px
54 + transform: scale(.2)
55 + transition: all .6s !important
56 + #text
57 + position: relative
58 + top: 0px
59 + display: flex
60 + flex-direction: column
61 + padding-right: 10px
62 + margin-left: 35px
63 + transition: all .6s;
64 + .title
65 + max-width: 100%
66 + font-size: 16px
67 + line-height: 26px
68 + font-weight: 700
69 + color: var(--liushen-text)
70 + text-overflow: ellipsis
71 + white-space: nowrap
72 + overflow: hidden
73 + .desc
74 + font-size: var(--global-font-size)
75 + line-height: 26px
76 + color: var(--liushen-secendtext)
77 + overflow: hidden
78 + font-size: small
79 + margin-bottom: 10px
80 + max-height: 52px
81 + -webkit-line-clamp: 2
82 + &:hover
83 + .img
84 + height: 35%
85 + filter: blur(3px)
86 + .info
87 + height: 66%
88 + background: #f2b94b
89 + color: #fff
90 + img
91 + left: -10px
92 + top: -50px
93 + transform: rotate(-35deg) rotateX(1turn) rotateY(1turn) scale(.6)
94 + #text
95 + top: 26px
96 + margin-left: 10px
97 + /*下面的不用动,为#article-container的定义*/
Novější Starší