hexo+buttefly如何添加小风车


1 效果展示

image-20250707192406050

2 如何添加

2.1 新建CSS

在对应主题下的/source/css下创建对应CSS主题文件,这里我因为用的是buttefly主题,所以路径是themes/butterfly/source/css

新建CSS文件之后再在文件里面添加对应代码,这里我创建的文件名称是pinwheel.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
/* 文章页H1-H6图标样式效果 */
h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
-webkit-animation: ccc 1.6s linear infinite ;
animation: ccc 1.6s linear infinite ;
}
@-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)
}
}

2.2 引入自定义css

在对应主题_config.yml文件进行配置,这里我用的butterfly主题,所以是themes/butterfly/_config.yml

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

然后继续themes/butterfly/_config.yml修改以下配置文件:

1
2
3
4
5
6
7
8
beautify:
enable: true
# Specify the field to beautify (site or post)
field: post
# Specify the icon to be used as a prefix for the title, such as '\f0c1'
title_prefix_icon: '\f863'
# Specify the color of the title prefix icon, such as '#F47466'
title_prefix_icon_color: "#F47466"

图标使用的Find Icons with the Perfect Look & Feel | Font Awesome上的图标,引用的是 Unicode 形式。可自行查找合适的。

2.3 如何控制转动速度

如果想调整转动的速度,可以修改css样式,其中数字(1.6s)数字越小转动越快:

1
2
3
4
h1::before, h2::before, h3::before, h4::before, h5::before, h6::before {
-webkit-animation: ccc 1.6s linear infinite ;
animation: ccc 1.6s linear infinite ;
}

2.4 如何控制转动方向

只需要修改CSS代码即可-1turn为逆时针转动,1turn为顺时针转动,记得相同数字部分全改完:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@-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)
}
}

2.5 如何修改小风车颜色、大小

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
#content-inner.layout h1::before {
color: #ef50a8 ;
margin-left: -1.55rem;
font-size: 1.3rem;
margin-top: -0.23rem;
}
#content-inner.layout h2::before {
color: #fb7061 ;
margin-left: -1.35rem;
font-size: 1.1rem;
margin-top: -0.12rem;
}
#content-inner.layout h3::before {
color: #ffbf00 ;
margin-left: -1.22rem;
font-size: 0.95rem;
margin-top: -0.09rem;
}
#content-inner.layout h4::before {
color: #a9e000 ;
margin-left: -1.05rem;
font-size: 0.8rem;
margin-top: -0.09rem;
}
#content-inner.layout h5::before {
color: #57c850 ;
margin-left: -0.9rem;
font-size: 0.7rem;
margin-top: 0.0rem;
}
#content-inner.layout h6::before {
color: #5ec1e0 ;
margin-left: -0.9rem;
font-size: 0.66rem;
margin-top: 0.0rem;
}

2.6 修改鼠标移入小风车转动变慢及变色

只需要CSS设置鼠标碰到标题时,小风车跟随标题变色,且像是被光标阻碍了,转速变慢。鼠标离开恢复转速。也可以设置为 none 鼠标碰到停止转动。

1
2
3
4
5
6
7
8
#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: #49b1f5 ;
}
#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: #49b1f5 ;
-webkit-animation: ccc 3.2s linear infinite ;
animation: ccc 3.2s linear infinite ;
}

2.7 设置页面图标转速

这个就是修改博客右下角那个齿轮icon的转速(

1
2
3
4
/* 页面设置icon转动速度调整 */
#rightside_config i.fas.fa-cog.fa-spin {
animation: fa-spin 5s linear infinite ;
}