前言 {#前言}

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

操作 {#操作}

在\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"> |

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

结语 {#结语}

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