前言

本文将介绍如何在侧边栏增添头像卡片动态背景。效果展示：将鼠标移至头像卡片即可看到。

教程链接：https://www.tqwba.com/x_d/jishu/298102.html

操作

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

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

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

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

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

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

  3. 重新部署，启动，就可以看到效果啦。

结尾

一个很简单的小修改