碎碎念

关于页面,就相当于一个站点的门户,只有这里才能让访客了解站长,原本的关于页面丑的简直没法看,干巴巴的文字,一点动效都没有,上网查找了一些相关教程,但是都没有满意的,要么就是太复杂,要么就是太花哨,不是说不好看,而是不适合我的站点。而现在,虽然不能说精通,但是好歹也算学过一点点魔改知识了,那么我们就尝试着自己搞搞,看看能不能整一个心仪的出来吧!

样式预览

可以直接去我站点进行查看:

下面是效果预览图:

白天模式

夜间模式

节卡片动效

链接卡片动效

窄屏适配

效果对比

虽然也说不上多么好看吧,但是至少是我喜欢的类型就可以啦,简单大气,并且按照我的想法加了一些动效。

修改前

修改后

教程

既然我写到这里了,就将我熬了一晚上写出来的玩意分享一下吧。

创建页面

source文件夹下创建目录about,在目录about下创建index.md文件,写入以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
---
title: 关于我的一些公开的私密资料……
type: "about"
comments: false
aside: false
---

<style>
/* 头像卡片 */
.author-img {
position: relative; /* 设置相对定位 */
}

.author-box {
text-align: center;
padding: 20px;
height: auto;
border-bottom: 2px solid #ddd;
/* 分割线 */
}

.author-img img {
border-radius: 50%; /* 显示为圆形 */
width: 150px; /* 宽度设置 */
height: 150px; /* 高度保持一致,否则就成椭圆了 */
margin-bottom: 10px;
}

.green-dot {
position: absolute;
right: calc(50% - 67px);
bottom: 13px;
width: 20px; /* 小圆点的宽度 */
height: 20px; /* 小圆点的高度 */
background-color: rgb(40, 231, 139); /* 小圆点的颜色,感觉很好看,对照着QQ的颜色搞的 */
border-radius: 50%; /* 使小圆点变成圆形 */
}

/* 文本格式,全局 */
.content h2 {
margin-top: 0;
margin-bottom: 0;
}

/* 设置每一节宽度,高度,长度等等 */
.content .column {
margin-top: 4px;
margin-bottom: 4px;
width: 65%;
margin-left: 20px;
}

/* 给第一格个人信息进行适配 */
.content .info-columns {
margin: 10px 0;
}

/* 第一格的个人信息,我使用了表格,为了显示更多信息的同时不空出大部分地方,你们自行选择 */
.content .row {
display: flex;
justify-content: space-between;
}

/* 每一节通用格式 */
.section {
display: flex;
padding: 10px;
align-items: center;
justify-content: space-between;
border-bottom: none;
margin-top: 20px;
margin: 20px 10px 0 10px;
border-radius: 10px;
background-color: white;
height: 250px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 夜间适配,改变背景和相关阴影部分 */
[data-theme=dark] .section {
background-color: #2c2c2c;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 右图左文样式,左边为row,因为是默认的所以不需要指定 */
.section.right {
flex-direction: row-reverse;
}

/* 节内图片所在位置相关格式,这里是因为我开了fancybox,也就是点击预览大图的效果,使图片被一个a所包裹,如果你关了请自行将该内容添加到下面的img中,其他位置对应调整 */
.section a {
width: 45%;
height: 100%;
transition: transform 0.5s ease; /* 添加过渡效果 */

}

/* 节内A标签内的图片,占满a标签,并不拉伸,使用覆盖,自适应大小 */
.section img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 8px;
}

/* 在鼠标悬停在 .section 上时,放大图片 */
.section:hover a {
transform: scale(1.10); /* 将图片放大10% */
}

/* 设置放大只在当图片没有消失时,否则这个宽度会覆盖掉设置的小时候为100%的设定 */
@media (min-width: 870px) {
/* 图像在右边的节,当鼠标放入,适当向左偏移,造成好像被图像挤过去的视觉效果 */
.section.right:hover .content {
margin-left: 10px;
}
/* 通用,因为文字是靠左的,改变宽度就被挤过去了 */
.section:hover .content {
width: 50%;
width: 50%;
}
}

/* 通用文字部分基础设置 */
.section .content {
width: 55%;
margin: 20px 20px;
max-height: 100%;
overflow: hidden; /* 超出部分不好看,我给隐藏了,看不见也比超出强,不过这个可以通过修改各种宽度高度进行个性适配 */
text-overflow: ellipsis;
transition: width 0.5s ease, margin-left 0.3s ease; /* 添加过渡效果 */
}

/* 最下方的一堆个人站点 */
.wrapper {
text-align: center; /* 文字居中 */
padding: 10px;
margin: 20px 10px 0 10px;
border-radius: 10px;
background-color: white;
height: auto;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 四个大字 */
.wrapper .label {
margin: 20px 20px;
}

/* 网格相关链接布局样式 */
.wrapper .site-grid {
margin-top: 10px;
border-radius: 8px;
display: grid;
grid-template-columns: repeat(4, 1fr); /* 一行四块 */
gap: 10px; /* 块之间的间隙 */
width: 100%;
height: auto; /* 宽度自动填充 */
}

/* 每个站点块的样式 */
.wrapper .site-grid .site-item {
z-index: 1;
border-radius: 10px;
position: relative;
width: 100%;/* 宽度自动填充 */
height: 200px;/* 设置块的高度 */
background-size: cover;/* 背景图片填充整个块 */
background-position: center;/* 背景图片居中 */
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
overflow: hidden; /* 使超出边框的内容隐藏 */
transition: transform 0.3s ease-in-out, z-index 0.3s ease-in-out;
}


/* 动画效果,鼠标放上去时背景图片放大的动画 */
@media (min-width: 870px) {
.wrapper .site-grid .site-item:hover {
transform: scale(1.2); /* 放大倍数 */
z-index: 2;
}
}

/* 块中的字覆盖层样式 */
.wrapper .site-overlay {
position: absolute;
inset: 0; /* 将 top, right, bottom, left 都设为 0 */
border-radius: 10px;
background: rgba(255, 255, 255, 0.5); /* 初始为透明背景 */
transition: background 0.6s, color 0.6s; /* 背景过渡效果 */
display: flex;
text-align: center;
justify-content: center;
align-items: center;
font: bold 25px sans-serif; /* 根据需求更改字体大小 */
color: #000000; /* 根据需求更改字体颜色,默认是黑 */
}

/* 鼠标悬停时的样式 */
.wrapper .site-item:hover .site-overlay {
background: rgba(0, 0, 0, 0.5); /* 白底变黑 */
color: #ffffff; /* 黑字变白 */
}

/* 夜间适配 */
[data-theme=dark] .wrapper {
background-color: #2c2c2c; /* 这是我全局的夜间统一色,你们自己看 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* 夜间鼠标悬停动效适配 */
[data-theme=dark] .wrapper .site-item:hover .site-overlay {
background: rgba(255, 255, 255, 0.5);
color: #000000;
}

/* 夜间卡片背景适配,和白天是相反的 */
[data-theme=dark] .wrapper .site-overlay {
background: rgba(0, 0, 0, 0.5);
color: #ffffff;
}

/* 窄屏适配 */
@media (max-width: 870px) {/* 当页面宽度小于870像素时 */
/* 不显示图片 */
.section a {
display: none;
}

/* 将位置留给文字 */
.section .content {
width: 100%;
}
/* 高度自己调整,因为窄屏视野没有那么大,部分节窄一点宽一点不影响,但是最小仍然是之前设置的值,这个需要你们自己改 */
.section {
height: auto;
min-height: 250px;
}

/* 下方链接到现在显示为两列,要不然挤得不行 */
.wrapper .site-grid {
grid-template-columns: repeat(2, 1fr);
/* 一行显示2个块 */
grid-auto-rows: 200px;
/* 保持行高一致 */
}
}

/* 当页面宽度小于480像素时,我们的表格成为1列 */
@media (max-width: 560px) {
.wrapper .site-grid {
grid-template-columns: repeat(1, 1fr);
/* 一行显示1个块 */
grid-auto-rows: 200px;
/* 保持行高一致 */
}
}
</style>

<div class="author-box">
<div class="author-img">
<img class="no-lightbox" src="https://blog.qyliu.top/info/avatar.ico">
<div class="green-dot"></div>
</div>
<div class="image-dot"></div>
<p class="p center logo large">关于我</p>
<p class="p center small">柳影曳曳,清酒孤灯,扬笔撒墨,心境如霜</p>
</div>

<div class="section left">
<img src="https://cdn.qyliu.top/i/2024/04/14/661ab011d7d88.png">
<div class="content">
<div class="info-columns">
<h2>个人信息</h2>
<ul>
<div class="row">
<div class="column">
<li>姓名: 柳清扬</li>
<li>住址: 陕西省</li>
<li>学校: 武汉理工大学</li>
</div>
<div class="column">
<li>性别: 妈宝男</li>
<li>年级: 二〇二一级</li>
<li>专业: 人工智能</li>
</div>
</div>
<li>邮箱: [email protected]</li>
</ul>
</div>
</div>
</div>

<div class="section right">
<img src="https://cdn.qyliu.top/i/2024/04/14/661ab051377ef.png">
<div class="content">
<h2>教育背景</h2>
<ul>
<li>学校: 武汉理工大学</li>
<li>主要专业课程: 干饭.jpg(101.5)</li>
</ul>
</div>
</div>

<div class="section left">
<img src="https://cdn.qyliu.top/i/2024/04/14/661ab078b3033.png">
<div class="content">
<h2>学生干部经历</h2>
<ul>
<li>武汉理工大学计算机协会事务部部长</li>
<li>人工智能2102班班长</li>
<li>易班学生工作站创意策划部通讯员、社会实践委员</li>
</ul>
</div>
</div>

<div class="section right">
<img src="https://cdn.qyliu.top/i/2024/04/14/661ab09243659.png">
<div class="content">
<h2>主要项目</h2>
<ul>
<li>多尺度人头视觉特征的人数统计模型</li>
<li>基于PyTorch实现LSTM汉语分词模型及情感分析</li>
<li>钢铁缺陷检测深度研究</li>
<li>基于Java实现MySQL数据库双端图书管理系统</li>
<li>基于MFC的连连看程序</li>
</ul>
</div>
</div>

<div class="section left">
<img src="https://cdn.qyliu.top/i/2024/04/14/661ab0c2a778f.png">
<div class="content">
<h2>技能</h2>
<ul>
<li>语言技能: 英语</li>
<li>专业技能: C++、Java、Python、Linux、HTML、CSS、JavaScript</li>
<li>通用技能: Office、Excel、PowerPoint</li>
<li>正在学习中</li>
</ul>
</div>
</div>

<div class="section right">
<img src="https://cdn.qyliu.top/i/2024/04/14/661ab0ee65c56.png">
<div class="content">
<h2>荣誉和奖项</h2>
<ul>
<li>全国大学生数学竞赛“省级三等奖”(2023.12)</li>
<li>钢铁缺陷检测百度挑战赛“第三名”(2023.10)</li>
<li>天梯赛校内选拔赛,“校级三等奖”(2020.8)</li>
<li>武汉理工大学“三好学生”(2021.12)</li>
<li>待完善</li>
</ul>
</div>
</div>

<div class="section left">
<img src="https://cdn.qyliu.top/i/2024/04/14/661ab10f685ed.png">
<div class="content">
<h2>自我评价</h2>
<ul>
<li>思想上乐观开朗,乐于助人,具有团队协作精神及创新意识。</li>
<li>工作上极富责任心与信念感,对待工作认真负责,有较强的组织管理及动手能力。</li>
<li>总结:人嘎嘎好!</li>
</ul>
</div>
</div>

<div class="wrapper">
<div class="label"><h2>本人站点</h2></div>
<div class="site-grid">
<a href="http://www.qyliu.top" target="_blank" class="site-item"
style="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab1495ff39.png')">
<div class="site-overlay">
<span>导航站点<br>(本站主站)</span>
</div>
</a>
<a href="https://memos.qyliu.top/" target="_blank" class="site-item"
style="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab179e85c2.png')">
<div class="site-overlay">
<span>盐焗小星球<br>(闲言碎语)</span>
</div>
</a>
<a href="https://listen.qyliu.top/" target="_blank" class="site-item"
style="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab19811d2c.png')">
<div class="site-overlay">
<span>清羽飞扬监控墙<br>(网站状态)</span>
</div>
</a>
<a href="https://visitor.qyliu.top/" target="_blank" class="site-item"
style="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab31673f3c.png')">
<div class="site-overlay">
<span>清羽飞扬访客统计<br>(统计人数)</span>
</div>
</a>
<a href="https://mindmap.qyliu.top/" target="_blank" class="site-item"
style="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab1e09dea0.png')">
<div class="site-overlay">
<span>清羽飞扬思维导图<br>(好用小工具)</span>
</div>
</a>
<a href="https://cdn.qyliu.top/" target="_blank" class="site-item"
style="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab1f51c57d.png')">
<div class="site-overlay">
<span>清羽飞扬图床<br>(自建的安稳)</span>
</div>
</a>
<a href="https://ittools.qyliu.top/" target="_blank" class="site-item"
style="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab3a11aa80.png')">
<div class="site-overlay">
<span>清羽飞扬IT工具箱<br>(好用小工具)</span>
</div>
</a>
<a href="https://drew.qyliu.top/" target="_blank" class="site-item"
style="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab22b067f1.png')">
<div class="site-overlay">
<span>清羽飞扬画板<br>(好用小工具)</span>
</div>
</a>
<a href="https://chat.qyliu.top/" target="_blank" class="site-item"
style="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab26310be8.png')">
<div class="site-overlay">
<span>清羽飞扬NextGPT<br>(AI对话工具)</span>
</div>
</a>
<a href="https://calcium.qyliu.top/" target="_blank" class="site-item"
style="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab27ab2abc.png')">
<div class="site-overlay">
<span>清羽飞扬在线计算器<br>(在线计算器)</span>
</div>
</a>
<a href="https://bingai.qyliu.top/" target="_blank" class="site-item"
style="background-image: url('https://cdn.qyliu.top/i/2024/04/14/661ab37220873.png')">
<div class="site-overlay">
<span>清羽飞扬的BingAI<br>(其实没啥用)</span>
</div>
</a>
</div>
</div>

替换其中的图片,文字,主题等部分,注意,需要替换图片,因为本站图片开了防盗链,您的站点可能无法正常显示,然后执行hexo三件套,应该就可以看见大致的效果了,不过可能不太理想。下面我们将进行微调,以达到更加理想的效果。

HTML特殊配置

我们从主干部分说起,讲一些主要需要注意的地方,头像没什么说的,改个路径就行,那就第一部分,个人信息部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="section left">
<img src="https://cdn.qyliu.top/i/2024/04/14/661ab011d7d88.png">
<div class="content">
<div class="info-columns">
<h2>个人信息</h2>
<ul>
<div class="row">
<div class="column">
<li>姓名: 柳清扬</li>
<li>住址: 陕西省</li>
<li>学校: 武汉理工大学</li>
</div>
<div class="column">
<li>性别: 妈宝男</li>
<li>年级: 二〇二一级</li>
<li>专业: 人工智能</li>
</div>
</div>
<li>邮箱: [email protected]</li>
</ul>
</div>
</div>
</div>

这里我们使用了一个表格进行更多信息的显示,防止大片的空白,可以对照着我的网站查看相关效果进行替换,在css部分,我们针对于表格进行了一定的适配:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 设置每一节宽度,高度,长度等等 */
.content .column {
margin-top: 4px;
margin-bottom: 4px;
width: 65%;
margin-left: 20px;
}

/* 给第一格个人信息进行适配 */
.content .info-columns {
margin: 10px 0;
}

/* 第一格的个人信息,我使用了表格,为了显示更多信息的同时不空出大部分地方,你们自行选择 */
.content .row {
display: flex;
justify-content: space-between;
}

没有什么需要具体修改的地方,唯一需要注意的就是,不要超出框格的高度,这个高度可以在section的样式中进行修改,我采用的是,当宽屏时,所有节高度一致,这样能保证更好的视觉效果,窄屏时,宽度自行变化,因为窄屏显示不佳,所以我选择了注意内容的紧凑性。

1
2
3
4
5
6
7
8
9
10
11
12
/* 每一节通用格式 */
.section {
height: 250px;
}

/* 窄屏适配 */
@media (max-width: 870px) {/* 当页面宽度小于870像素时 */
.section {
height: auto;
min-height: 250px; /* 这里也需要修改,和上面的盖度一致 */
}
}

下面就是正常的每一节了,在每一节中,我分成了两个类:rightleft,分别对应图片在右和图片在左。这个在你想添加时可以自行使用,对于节的定义上面已经修改过了,这里就不说了。

然后就是下方站点,这里我使用了表格布局,按照顺序往下添加即可。

CSS特殊配置

下面我们对于css中需要修改的部分进行解析,css我大致分成了四个部分:白天模式,黑夜模式,动效适配,窄屏适配。

白天模式

  1. section高度:这个需要看你的内容量进行动态调整,主要需要修改的就是height

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    /* 每一节通用格式 */
    .section {
    display: flex;
    padding: 10px;
    align-items: center;
    justify-content: space-between;
    border-bottom: none;
    margin-top: 20px;
    margin: 20px 10px 0 10px;
    border-radius: 10px;
    background-color: white;
    height: 250px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }
  2. site-item站点块:最下方表格布局中,每个站点的部分,按照备注进行自定义修改:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    /* 每个站点块的样式 */
    .wrapper .site-grid .site-item {
    z-index: 1;
    border-radius: 10px;
    position: relative;
    width: 100%;/* 宽度自动填充 */
    height: 200px;/* 设置块的高度 */
    background-size: cover;/* 背景图片填充整个块 */
    background-position: center;/* 背景图片居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    overflow: hidden; /* 使超出边框的内容隐藏 */
    transition: transform 0.3s ease-in-out, z-index 0.3s ease-in-out;
    }
  3. site-overlay站点块前置遮罩:字体及那白色半透明遮罩:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    /* 块中的字覆盖层样式 */
    .wrapper .site-overlay {
    position: absolute;
    inset: 0; /* 将 top, right, bottom, left 都设为 0 */
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.5); /* 初始为透明背景 */
    transition: background 0.6s, color 0.6s; /* 背景过渡效果 */
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font: bold 25px sans-serif; /* 根据需求更改字体大小 */
    color: #000000; /* 根据需求更改字体颜色,默认是黑 */
    }
  • 白天模式进行了大部分变量的定义,尽量修改你看的懂的元素,如果有问题可以发到评论区。

黑夜模式

  • 该部分内容就比上面的少很多了,主要是在深色下的颜色的一些变换,如下:
  1. section每一节的黑夜适配:

    1
    2
    3
    4
    5
    /* 夜间适配,改变背景和相关阴影部分 */
    [data-theme=dark] .section {
    background-color: #2c2c2c;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }
  2. wrapper下方站点表格的黑夜适配,我让他和白天模式的颜色,背景,字体都是反着来的,具体看我的站点效果:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    /* 夜间适配 */
    [data-theme=dark] .wrapper {
    background-color: #2c2c2c; /* 这是我全局的夜间统一色,你们自己看 */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    /* 夜间鼠标悬停动效适配 */
    [data-theme=dark] .wrapper .site-item:hover .site-overlay {
    background: rgba(255, 255, 255, 0.5);
    color: #000000;
    }

    /* 夜间卡片背景适配,和白天是相反的 */
    [data-theme=dark] .wrapper .site-overlay {
    background: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    }

动效适配

该部分主要有上面的节和下面的链接卡片两点,注意对应元素的相关部分需要添加transition属性,第一个为添加transition举例说明,后面不再重复:

  1. section节图片放大:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    /* 节内图片所在位置相关格式,这里是因为我开了fancybox,也就是点击预览大图的效果,使图片被一个a所包裹,如果你关了请自行将该内容添加到下面的img中,其他位置对应调整 */
    .section a {
    width: 45%;
    height: 100%;
    transition: transform 0.5s ease; /* 添加过渡效果 */
    }

    /* 节内A标签内的图片,占满a标签,并不拉伸,使用覆盖,自适应大小 */
    .section img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    }

    /* 在鼠标悬停在 .section 上时,放大图片 */
    .section:hover a {
    transform: scale(1.10); /* 将图片放大10% */
    }

    /* 设置放大只在当图片没有消失时,否则这个宽度会覆盖掉设置的小时候为100%的设定 */
    @media (min-width: 870px) {
    /* 图像在右边的节,当鼠标放入,适当向左偏移,造成好像被图像挤过去的视觉效果 */
    .section.right:hover .content {
    margin-left: 10px;
    }
    /* 通用,因为文字是靠左的,改变宽度就被挤过去了 */
    .section:hover .content {
    width: 50%;
    width: 50%;
    }
    }

    /* 通用文字部分基础设置 */
    .section .content {
    width: 55%;
    margin: 20px 20px;
    max-height: 100%;
    overflow: hidden; /* 超出部分不好看,我给隐藏了,看不见也比超出强,不过这个可以通过修改各种宽度高度进行个性适配 */
    text-overflow: ellipsis;
    transition: width 0.5s ease, margin-left 0.3s ease; /* 添加过渡效果 */

    注意其中最后一行的transition,变换的什么,就需要添加对应的属性,这里我们主要变动两点,鼠标移入时,图片变大,宽度变宽,对应文字宽度变低,如果文字在左边,为了同步动效,左边框减小,所以这里我们使用到的有widthmargin-left

  2. site-grid移入放大及变色动效:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    /* 动画效果,鼠标放上去时背景图片放大的动画 */
    @media (min-width: 870px) {
    .wrapper .site-grid .site-item:hover {
    transform: scale(1.2); /* 放大倍数 */
    z-index: 2;
    }
    }

    /* 鼠标悬停时的样式 */
    .wrapper .site-item:hover .site-overlay {
    background: rgba(0, 0, 0, 0.5); /* 白底变黑 */
    color: #ffffff; /* 黑字变白 */
    }

    /* 夜间鼠标悬停动效适配 */
    [data-theme=dark] .wrapper .site-item:hover .site-overlay {
    background: rgba(255, 255, 255, 0.5);
    color: #000000;
    }

    鼠标移入,背景变为反色,字体变为反色,图片放大,为了防止被其他块遮挡,设置z-index

窄屏(手机)适配

手机的配置一般比较低,为了防止动画过多导致加载慢,我们在手机上禁止了绝大部分的效果,检查是否是手机,其实就是适配宽度,下面是本次修改对于宽度的适配。

  1. section窄屏不修改文字宽度,因为后面媒体检测屏幕宽度部分我们会删除图片并修改文字宽度为100%,也就是占满整个页面,这里不添加防止覆盖:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* 设置放大只在当图片没有消失时,否则这个宽度会覆盖掉设置的小时候为100%的设定 */
    @media (min-width: 870px) {
    /* 图像在右边的节,当鼠标放入,适当向左偏移,造成好像被图像挤过去的视觉效果 */
    .section.right:hover .content {
    margin-left: 10px;
    }
    /* 通用,因为文字是靠左的,改变宽度就被挤过去了 */
    .section:hover .content {
    width: 50%;
    width: 50%;
    }
    }
  2. site-grid窄屏不显示放大动效,因为屏幕变窄后,由于设备差异,放大可能会超出屏幕,变色动效仍然显示(其实点击一瞬间也看不见)。

    1
    2
    3
    4
    5
    6
    7
    /* 动画效果,鼠标放上去时背景图片放大的动画 */
    @media (min-width: 870px) {
    .wrapper .site-grid .site-item:hover {
    transform: scale(1.2); /* 放大倍数 */
    z-index: 2;
    }
    }
  3. 窄屏统一适配,不显示图片,修改宽度,修改表格列数,根据宽度不同从四列变为两列再变为一列:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    /* 窄屏适配 */
    @media (max-width: 870px) {/* 当页面宽度小于870像素时 */
    /* 不显示图片 */
    .section a {
    display: none;
    }

    /* 将位置留给文字 */
    .section .content {
    width: 100%;
    }
    /* 高度自己调整,因为窄屏视野没有那么大,部分节窄一点宽一点不影响,但是最小仍然是之前设置的值,这个需要你们自己改 */
    .section {
    height: auto;
    min-height: 250px;
    }

    /* 下方链接到现在显示为两列,要不然挤得不行 */
    .wrapper .site-grid {
    grid-template-columns: repeat(2, 1fr);
    /* 一行显示2个块 */
    grid-auto-rows: 200px;
    /* 保持行高一致 */
    }
    }

    /* 当页面宽度小于480像素时,我们的表格成为1列 */
    @media (max-width: 560px) {
    .wrapper .site-grid {
    grid-template-columns: repeat(1, 1fr);
    /* 一行显示1个块 */
    grid-auto-rows: 200px;
    /* 保持行高一致 */
    }
    }

上面就是我们的CSS修改的部分了,下面是在魔改过程中出现的大问题的记录:

问题记录

格式错乱

内容大范围错乱,并出现长竖条代码块问题:

格式大范围错乱

原因:

markdown,html部分存在空格:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="section right">
<img src="https://cdn.qyliu.top/i/2024/04/14/661ab09243659.png">
<div class="content">
<h2>主要项目</h2>
<ul>
<li>多尺度人头视觉特征的人数统计模型</li>
-
<li>基于PyTorch实现LSTM汉语分词模型及情感分析</li>
<li>钢铁缺陷检测深度研究</li>
<li>基于Java实现MySQL数据库双端图书管理系统</li>
<li>基于MFC的连连看程序</li>
</ul>
</div>
</div>

解决方法:

去掉其中的多余空格,最好不要有空格,经过测试,只有div之间可以存在空格,div内尽量不要空格。

其他问题正在记录中,欢迎反馈!

每日一图

每日一图

——柳影曳曳,清酒孤灯,扬笔撒墨,心境如霜