One

主题

One2025-04-09
504
2.2m
Get...

首页卡片动画 ​

首页卡片动画 ​

image-20250414205926032

目录 ​

[toc]

版权 ​

警告

本着开源共享、共同学习的精神：

本文是在 《Hyde Blog》博主的《首页卡片动画》文章 基础上增加了一些自己的实际操作记录和修改，内容依旧属于原作者所有。转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢。

环境 ​

2025.4.6(已解决)

警告

次配置适用于Teek@1.0.0-alpha.9-2025.4.6版本（其它版本可自行测试）。

提示

自己开源的 《vitepress-theme-teek-one-public》网站模板。

此模板是在《Young Kbt blog》大佬开源项目《vitepress-theme-teek 》基础上修改为自己的风格而成，感谢大佬开发得主题，大佬威武。❤️❤️

效果 ​

配置 ​

（1）新建文件

提示

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

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

scss

css
// 文章列表卡片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; // 首页卡片圆角效果
  }
}

（2）引入样式

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

scss

css
@use "./text-card-hover.scss" as *; // 文字在悬停时会出现下划线动画
  • 在docs\.vitepress\theme\index.ts文件中，引入index.scss文件：
ts
import "./style/index.scss"; // 引入.vitepress\theme\style\index.scss全局样式

（3）运行测试

bash
pnpm docs:dev

结束。

最近更新