前言

默认的 Butterfly 主题个人卡片在悬停时通常是头像旋转。本教程将实现一个更有趣的交互效果：
当鼠标悬停在卡片上时，头像平滑地移动到左上角并缩小，腾出中间位置显示一段自定义的欢迎语气泡。

实现步骤

1. 修改卡片布局 (Pug)

我们需要在个人信息卡片中预埋一段欢迎语的 HTML 结构。

修改文件：themes/butterfly/layout/includes/widget/card_author.pug

找到 .avatar-img 所在位置，在它下方添加 .author-msg-box 结构：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.card-widget.card-info.text-center
  .avatar-img
    img(src=url_for(theme.avatar.img) onerror=`this.onerror=null;this.src='` + url_for(theme.error_img.flink) + `'` alt="avatar")
  
  //- 新增部分开始
  .author-msg-box
    .author-msg-content
      | 👋 欢迎光临！
      br
      | 我是Kaitumei，一个热爱记录、喜欢分享的小卡拉米。😊
      br
      | 📸 🌈 🎨 🏐
  //- 新增部分结束
  
  .author-info-name= config.author

注意：Pug 语法对缩进非常敏感，请确保 .author-msg-box 与 .avatar-img 同级（即缩进一致）。

2. 添加 CSS 样式

为了方便管理，我们创建一个新的 CSS 文件：source/css/custom-author.css。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/* ===========================================
   个人信息卡片悬停交互 (Author Card Hover Effect)
   =========================================== */
.card-widget.card-info {
    position: relative;
    /* 预留头像高度空间，防止绝对定位后塌陷 */
    padding-top: 140px !important;
    overflow: hidden;
}

/* 1. 头像样式重置 */
.card-widget.card-info .avatar-img {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    z-index: 20;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); /* 弹性过渡 */
    /* 移除之前的任何旋转动画 */
    animation: none !important;
}

.card-widget.card-info .avatar-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    /* 强制禁止旋转 */
    transition: none !important;
    transform: none !important;
}

/* 2. 悬停状态：头像移至左上角并缩小 */
.card-widget.card-info:hover .avatar-img {
    top: 10px;
    left: 10px;
    width: 50px;
    height: 50px;
    transform: translateX(0); /* 取消水平居中 */
    border: 2px solid var(--btn-bg); /* 增加一点装饰 */
}

/* 3. 悬停显示的文字框 (气泡) */
.author-msg-box {
    position: absolute;
    top: 30px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 85%;
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(5px);
    border-radius: 12px;
    padding: 15px;
    opacity: 0;
    transform: scale(0.8) translateY(20px);
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    pointer-events: none; /* 防止遮挡下方点击 */
    z-index: 10;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* 文字内容样式 */
.author-msg-content {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}

/* 深色模式适配 */
[data-theme="dark"] .author-msg-box {
    background: rgba(40, 40, 40, 0.9);
    color: #eee;
}
[data-theme="dark"] .author-msg-content {
    color: #eee;
}

/* 4. 触发显示 */
.card-widget.card-info:hover .author-msg-box {
    opacity: 1;
    transform: scale(1) translateY(0);
    top: 60px; /* 最终显示位置，在小头像下方一点 */
}

/* 5. 悬停时隐藏原有的描述文字，避免干扰 (可选) */
.card-widget.card-info .author-info-description {
    transition: opacity 0.3s;
}
.card-widget.card-info:hover .author-info-description {
    opacity: 0;
}

3. 引入样式

最后，别忘了在 _config.butterfly.yml 中引入我们新写的 CSS 文件。

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

效果

重新生成博客 (hexo g) 后：

  1. 默认状态下，头像居中显示，不再旋转。
  2. 鼠标悬停时，头像缩小并移动到左上角，中间弹出欢迎语气泡。