首页卡片动画

 1// 文章列表卡片hover阴影圆角效果
 2.tk-post-item {
 3  transition: transform 0.3s ease, box-shadow 0.3s ease; // 过渡属性为transform和box-shadow
 4
 5  &:hover {
 6    box-shadow: 0 10px 16px -4px var(--vp-c-brand-1); // 首页卡片阴影效果
 7    transform: translateY(-3px); // 首页卡片向上移动3px
 8    border-radius: 8px; // 首页卡片圆角效果
 9  }
10}

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

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

1pnpm docs:dev