前言

本文将介绍如何在侧边栏增添头像卡片动态背景。

操作

在\themes\butterfly\source\css目录下创建一个css文件，将如下代码写入该文件（有两种效果，选其一）:

1
2
3
4
5
6
7
8
9
/* 效果一：彩带 */
.card-info-avatar:hover {
  background: url(https://cdn.jsdelivr.net/gh/rigodlee/BLOGCDN/img/H3342af90d24b4d62b9bbfec9688ccc25M.gif);
}

/* 效果二：花 */
.card-info-avatar:hover {
  background: url(https://cdn.jsdelivr.net/gh/rigodlee/BLOGCDN/img/20200530181856.gif);
}

找到主题配置文件_config.butterfly.yml，在inject的head处引入该css文件：

1
2
3
inject:
  head:
      - <link rel="stylesheet" href="/css/xxx.css">

重新部署和启动后，就可以看到效果啦：）

结语

一个很简单的小特效，配置成功后，将鼠标移至头像卡片上即可看到效果。