效果
标题级别不同小风车颜色不同，鼠标移入会有转动变慢及变色效果。
新建css
建议在/source下创建诸如img/css/js等文件夹，存放文章或网站用的素材，分门别类后续也方便维护。
Hexo打包的时候，会自动把/source下的文件，包含到网站静态文件中去。
引入自定义css
在站点配置文件/_config.butterfly.yml中，搜索定位到inject，插入以下内容：
inject:
head:
# - <link rel="stylesheet" href="/xxx.css">
- <link rel="stylesheet" href="/css/custom.css">
这样，后续所有样式的自定义，就可以在/source/css/custom.css文件中进行，避免改源码，以免后续更新变得复杂。
标题美化-加小风车样式
会改变ol、ul、h1-h5的样式
field配置生效的区域
post只在文章页生效site在全站生效
修改主题配置文件，改成小风车样式
# 美化页面显示
beautify:
enable: true
field: post # site/post
title-prefix-icon: '\f863'
title-prefix-icon-color: "#ff7849"
图标使用的「fontawesome.com」上的图标，引用的是Unicode形式。可自行查找合适的。
让小风车转起来
在上文的/source/css/custom.css文件中，加入以下代码即可。
/* 文章页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)
}
}
风车转动速度
想调整风车转动速度，修改以下内容里的时间，数字越小转动越快。
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 ;
}
风车转动方向
以下代码中，-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.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;
}
鼠标移入小风车转动变慢及变色
设置鼠标碰到标题时，小风车跟随标题变色，且像是被光标阻碍了，转速变慢。鼠标离开恢复转速。也可以设置为none鼠标碰到停止转动。
#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 ;
}
页面设置图标转速
突然发现原作者设置的右下角设置icon转的太快了，让它慢一点吧。继续添加：
/* 页面设置icon转动速度调整 */
#rightside_config i.fas.fa-cog.fa-spin {
animation: fa-spin 5s linear infinite ;
}
大功告成
此文章参考于「我的Blog美化日记——Hexo+Butterfly」。
