效果

標題級別不同小風車顏色不同，鼠標移入會有轉動變慢及變色效果。

新建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」。