Butterfly主题文章标题改成转动小风车

效果

标题级别不同小风车颜色不同，鼠标移入会有转动变慢及变色效果。

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