hyde风格-hover往上移动

 1@mixin card-hover-effect {
 2  border-radius: 10px; //首页卡片圆角
 3  box-shadow: 0 0 16px var(--vp-home-list-box-shadow);
 4  transition:
 5    transform 0.3s ease,
 6    box-shadow 0.3s ease;
 7
 8  &:hover {
 9    box-shadow: 0 10px 16px -4px var(--vp-c-brand-1);
10    transform: translateY(-3px);
11    border-radius: 10px; //侧边卡片栏圆角
12  }
13}
14
15:root {
16  --vp-home-list-box-shadow: #ccc;
17}
18
19.dark {
20  --vp-home-list-box-shadow: #c3c3c3;
21}
22// 列表卡片悬停效果
23.tk-post-item {
24  @include card-hover-effect;
25}
26// 卡片栏悬停效果
27.tk-page-card {
28  @include card-hover-effect;
29}
30// card卡片悬停效果
31.tk-post-item-card {
32  @include card-hover-effect;
33}
34
35
36
37
38
39// 定义变量
40$white: #ffffff;
41$circle-height: 310px;
42$icons-margin-top: 10px;
43
44// 圆形背景
45.is-circle-bg {
46  height: $circle-height; // 首页卡片栏博主信息高度
47}
48
49.tk-my__icons {
50  margin-top: $icons-margin-top; //首页卡片栏博主信息社交图标位置
51  color: $white; //首页卡片栏作者信息社交图标颜色
52}
53
54// 首页卡片栏博主信息
55.tk-my__blogger {
56  .name,
57  .slogan {
58    color: $white; // 博主名称和标语颜色
59    display: flex; // 水平居中
60    justify-content: center; // 水平居中
61  }
62}
63
64.tk-my__avatar {
65  margin-top: 220px;
66  margin-bottom: 7px;
67}
68// .is-circle-bg {
69//   height: 645px;
70// }
71
72
73
74
75.tk-post-item-card__cover-img .cover-img {
76  cursor: pointer;
77  height: 190px;
78  -o-object-fit: cover;
79  object-fit: cover;
80  transition: transform .4s linear;
81  width: 100%;
82}

1@use "./text-card-hover.scss" as *; // 文字在悬停时会出现下划线动画