首页卡片动画 原创

新建文件

提示

--vp-c-brand-1 是变量来的，我在var.scss文件中定义的,没有的话自己改成颜色代码就行,例如：#5da8ff

• 在docs\.vitepress\theme\style\文件夹中，新建text-card-hover.scss文件，并添加以下代码：

/*文章标题动态小横线t*/
$underline-height: 2px; // 下划线高度
$transition-duration: 0.3s; // 下划线动画时长

a {
  position: relative; // 相对定位，以便于设置伪元素的位置
  display: inline-block; // 内联块元素，以便于设置宽度和高度

  &::after {
    content: " "; // 伪元素内容为空
    position: absolute; // 绝对定位，以便于设置位置
    left: 50%; // 水平居中
    bottom: -$underline-height; // 距离底部的距离
    width: 0; // 初始宽度为0
    height: $underline-height; // 高度为下划线高度
    background: var(--vp-c-brand-1); // 下划线颜色
    transform: translateX(-50%); // 水平居中
    transition: {
      property: width, left; // 过渡属性为宽度和left
      duration: $transition-duration; // 过渡时长
      timing-function: ease-out; // 过渡函数为ease-out
    }
  }

  &:hover {
    &::after {
      left: 50; // 线条从中间开始
      width: 100%; // 线条宽度为100%
      transition-timing-function: cubic-bezier(
        0.25,
        0.46,
        0.45,
        0.94
      ); // 过渡函数为cubic-bezier
    }
  }
}

// 文章列表卡片hover阴影圆角效果
.tk-post-item {
  transition: transform 0.3s ease, box-shadow 0.3s ease; // 过渡属性为transform和box-shadow

  &:hover {
    box-shadow: 0 10px 16px -4px var(--vp-c-brand-1); // 首页卡片阴影效果
    transform: translateY(-3px); // 首页卡片向上移动3px
    border-radius: 8px; // 首页卡片圆角效果
  }
}

引入样式

• 在docs\.vitepress\theme\style\index.scss文件中，引入text-card-hover.scss文件：

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

• 在docs\.vitepress\theme\index.ts文件中，引入index.scss文件：

import "./style/index.scss"; // 引入.vitepress\theme\style\index.scss全局样式