hyde风格-hover往上移动

hyde风格-hover往上移动

卡片 hover 往上移动 效果。

配置

（1）编辑docs\.vitepress\theme\style\text-card-hover.scss文件

@mixin card-hover-effect {
  border-radius: 10px; //首页卡片圆角
  box-shadow: 0 0 16px var(--vp-home-list-box-shadow);
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;

  &:hover {
    box-shadow: 0 10px 16px -4px var(--vp-c-brand-1);
    transform: translateY(-3px);
    border-radius: 10px; //侧边卡片栏圆角
  }
}

:root {
  --vp-home-list-box-shadow: #ccc;
}

.dark {
  --vp-home-list-box-shadow: #c3c3c3;
}
// 列表卡片悬停效果
.tk-post-item {
  @include card-hover-effect;
}
// 卡片栏悬停效果
.tk-page-card {
  @include card-hover-effect;
}
// card卡片悬停效果
.tk-post-item-card {
  @include card-hover-effect;
}





// 定义变量
$white: #ffffff;
$circle-height: 310px;
$icons-margin-top: 10px;

// 圆形背景
.is-circle-bg {
  height: $circle-height; // 首页卡片栏博主信息高度
}

.tk-my__icons {
  margin-top: $icons-margin-top; //首页卡片栏博主信息社交图标位置
  color: $white; //首页卡片栏作者信息社交图标颜色
}

// 首页卡片栏博主信息
.tk-my__blogger {
  .name,
  .slogan {
    color: $white; // 博主名称和标语颜色
    display: flex; // 水平居中
    justify-content: center; // 水平居中
  }
}

.tk-my__avatar {
  margin-top: 220px;
  margin-bottom: 7px;
}
// .is-circle-bg {
//   height: 645px;
// }




.tk-post-item-card__cover-img .cover-img {
  cursor: pointer;
  height: 190px;
  -o-object-fit: cover;
  object-fit: cover;
  transition: transform .4s linear;
  width: 100%;
}

（2）引入

编辑docs\.vitepress\theme\style\index.scss文件：

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

（3）验证。

结束。