快捷菜单
常用功能一站直达
更多功能请点顶栏「快捷菜单」
卡片 hover 放大效果。
(1)引入在线代码
编辑docs\.vitepress\theme\index.ts文件
1import "vitepress-theme-teek/theme-chalk/tk-home-card-hover.css"; // 首页卡片悬停效果
(2)添加css代码用以控制卡片高度等
编辑docs\.vitepress\theme\style\var.scss文件:(在最后添加如下代码)
1// 开始******************************************************************************************************************
2// 2025年10月15日 更新
3// 控制首页卡片高度等代码
4// 定义变量
5$white: #ffffff;
6$circle-height: 310px;
7$icons-margin-top: 10px;
8
9// 圆形背景
10.is-circle-bg {
11 height: $circle-height; // 首页卡片栏博主信息高度
12}
13
14.tk-my__icons {
15 margin-top: $icons-margin-top; //首页卡片栏博主信息社交图标位置
16 color: $white; //首页卡片栏作者信息社交图标颜色
17}
18
19// 首页卡片栏博主信息
20.tk-my__blogger {
21 .name,
22 .slogan {
23 color: $white; // 博主名称和标语颜色
24 display: flex; // 水平居中
25 justify-content: center; // 水平居中
26 }
27}
28
29.tk-my__avatar {
30 margin-top: 220px;
31 margin-bottom: 7px;
32}
33// .is-circle-bg {
34// height: 645px;
35// }
36
37
38
39
40.tk-post-item-card__cover-img .cover-img {
41 cursor: pointer;
42 height: 190px;
43 -o-object-fit: cover;
44 object-fit: cover;
45 transition: transform .4s linear;
46 width: 100%;
47}
48
49// 结束******************************************************************************************************************(3)验证。
结束。
日历 · 精选 · 友链 · 更多
如果内容对你有帮助,欢迎请我喝杯咖啡 ☕



One的公众号
爱折腾博客的小白