参考教程

Fomalhaut🥝
文章H1~H6标题小风车转动效果

修改主题配置项

修改主题配置文件_config.butterfly.yml文件的beautify配置项，这里我改成四叶草：

1
2
3
4
5
6
7
# Beautify (美化頁面顯示)
beautify:
  enable: true
  field: post # site/post
  #  title-prefix-icon: '\f0c1' # 文章标题前小图标
  title-prefix-icon: '\e139' # 文章标题前小图标
  title-prefix-icon-color: '#F47466'

增加css样式

在[BlogRoot]\source\css\custom.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

/* 文章页H1-H6图标样式效果 */
/* 控制风车转动速度 4s那里可以自己调节快慢 */
/*https://www.fomal.cc/posts/5389e93f.html*/
h1::before,
h2::before,
h3::before,
h4::before,
h5::before,
h6::before {
  -webkit-animation: ccc 4s linear infinite;
  animation: ccc 4s linear infinite;
}
/* 控制风车转动方向 -1turn 为逆时针转动，1turn 为顺时针转动，相同数字部分记得统一修改 */
@-webkit-keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
@keyframes ccc {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-1turn);
    transform: rotate(-1turn);
  }
}
/* 设置风车颜色 */
#content-inner.layout h1::before {
  color: #ef50a8;
  margin-left: -1.8rem;
  font-size: 1.8rem;
  margin-top: -0.4rem;
}
#content-inner.layout h2::before {
  color: #fb7061;
  margin-left: -1.5rem;
  font-size: 1.5rem;
  margin-top: -0.3rem;
}
#content-inner.layout h3::before {
  color: #ffbf00;
  margin-left: -1.22rem;
  font-size: 1.3rem;
  margin-top: -0.09rem;
}
#content-inner.layout h4::before {
  color: #a9e000;
  margin-left: -1.05rem;
  font-size: 1.1rem;
  margin-top: -0.09rem;
}
#content-inner.layout h5::before {
  color: #57c850;
  margin-left: -0.9rem;
  font-size: 0.9rem;
  margin-top: 0rem;
}
#content-inner.layout h6::before {
  color: #5ec1e0;
  margin-left: -0.6rem;
  font-size: 0.66rem;
  margin-top: 0.1rem;
}
/* s设置风车hover动效 6s那里可以自己调节快慢*/
#content-inner.layout h1:hover,
#content-inner.layout h2:hover,
#content-inner.layout h3:hover,
#content-inner.layout h4:hover,
#content-inner.layout h5:hover,
#content-inner.layout h6:hover {
  color: var(--theme-color);
}
#content-inner.layout h1:hover::before,
#content-inner.layout h2:hover::before,
#content-inner.layout h3:hover::before,
#content-inner.layout h4:hover::before,
#content-inner.layout h5:hover::before,
#content-inner.layout h6:hover::before {
  color: var(--theme-color);
  -webkit-animation: ccc 6s linear infinite;
  animation: ccc 6s linear infinite;
}

inject引入

在主题配置文件_config.butterfly.yml的inject配置项进行引入：

1
2
3
inject:
  head: # 自定义css
    - <link rel="stylesheet" href="/css/custom.css">

示例

示例

示例

示例

示例

示例
示例