首页卡片文字

首页卡片阴影和动画
首页卡片标题文字颜色及下划线的动画
首页卡片分类、标签下划线动画

配置

在docs\.vuepress\styles\palette.styl添加以下代码

css

.card-box:hover {
  box-shadow: 0 10px 16px -4px #6196cc; /* 设置鼠标悬停时的阴影效果 */
  transform: translateY(-3px); /* 设置鼠标悬停时的垂直位移 */
  border-color: #3475f5; /* 设置鼠标悬停时的边框颜色 */
}

/* 深色模式卡片圆角配置 */
.theme-mode-dark .card-box {
  border-radius: var(--CardBox-radius); /* 设置四个角的圆角半径为 10px */
}

.post-list .post .title-wrapper a {
  position: relative; /* 设置元素为相对定位 */
  display: inline-block; /* 设置元素为行内块元素 */
  transition: color 0.3s ease; /* 设置颜色过渡效果 */
}

.post-list .post .title-wrapper a:hover {
  color: rgb(0 118 255); /* 设置鼠标悬停时的文字颜色 */
}

.post-list .post .title-wrapper a::after {
  content: ""; /* 设置伪元素的内容为空 */
  position: absolute; /* 设置伪元素为绝对定位 */
  left: 50%; /* 从中间开始 */
  bottom: -2px;
  width: 0; /* 初始宽度为0 */
  height: 2px;
  background: rgb(0 118 255);
  transform: translateX(-50%); /* 居中定位 */
  transition: width 0.3s ease-out, left 0.3s ease-out; /* 添加 left 的过渡 */
}

.post-list .post .title-wrapper a:hover::after {
  left: 50; /* 扩展到最左侧 */
  width: 100%; /* 宽度充满容器 */
}

首页卡片文字 ​

配置 ​

首页卡片文字

配置