跳到主要内容

群主风格-hover变大效果

最后更新于:

群主风格-hover变大效果

卡片 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)验证。

结束。

最新文章

文档导航