Hexo增添头像卡片动态背景

花猪

发布于 2022-02-16 16:50:32

4910

发布于 2022-02-16 16:50:32

文章被收录于专栏：花猪的学习记录

前言

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

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

操作

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

/* 效果一：彩带 */
.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文件：

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

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

结尾

一个很简单的小修改

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021-02-24，如有侵权请联系 cloudcommunity@tencent.com 删除

css

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体同步曝光计划，欢迎热爱写作的你一起参与！

css

登录后参与评论

0 条评论

热度

Hexo增添头像卡片动态背景

Hexo增添头像卡片动态背景

前言

操作

结尾

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐