效果
标题级别不同小风车颜色不同，鼠标移入会有转动变慢及变色效果。
新建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: truefield: post # site/posttitle-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」。
