Hexo增添头像卡片动态背景

前言

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

教程链接: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);
    }
  2. 找到主题配置文件_config.butterfly.yml,在injecthead处引入该css文件:

    1
    2
    3
    inject:
    head:
    - <link rel="stylesheet" href="/css/xxx.css">
  3. 重新部署,启动,就可以看到效果啦。


结尾

一个很简单的小修改