在Codepen中看到了一个推荐了好多天的无div动画,这个教程主要是来介绍如何在Hexo的Butterfly主题下使用这种无div动画并以这个小汽车为例。感谢原作者abxlfazl khxrshidi的小汽车!~

那么我们来开始吧!

样式预览

下载资源文件

在这里提供了我正在使用的资源文件。你可以下载我准备好的资源文件,也可以从作者的codepen中复制代码并按照资源文件进行修改。

立即下载

引入资源文件

我将小汽车文件放置在source/zhheo/zhheocar.css,所以在博客的配置文件_config.ymlinjecthead中,我增加了如下配置项。

1
- <link rel="stylesheet" href="/zhheo/zhheocar.css">

修改loading文件

将loading文件改成如下样式(建议将原有内容注释掉而不是删除)

文件地址:layout/includes/loading/loading.pug

1
2
3
4
5
#loading-box
.loading-left-bg
.loading-right-bg
.spinner-box
.carplay

修改加载样式

我们需要在加载完毕后隐藏小汽车

文件地址:source/css/_layout/loading.styl

要添加的是这段代码:

1
2
.carplay
display: none

添加在如下的位置:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
if hexo-config('preloader')
/* 略 */
#loading-box
/* 略 */
&.loaded
.loading-left-bg
transition: all .5s
transform: translate(-100%, 0)

.loading-right-bg
transition: all .5s
transform: translate(100%, 0)

.spinner-box
display: none

/* 在这个位置添加下面的内容 */
.carplay
display: none
/* 添加完毕 */

#loadingtxt {
/* 后面略 */

自定义你的小汽车

你可以在刚刚下载好的文件中更改颜色变量所对应的色值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.carplay{
box-sizing: border-box;

--black :#1a1c20 ;
--white : #fff ;
--green : #3f3f3f ;
--d-green : #1e1e1e ;
--gray : #c1c1c1 ;
--l-gray: #c4c4c4 ;
--m-gray : #373838 ;
--d-gray : #282724 ;
--d-blue: #202428 ;
--orange : #ef6206 ;
--yellow : #dfa500 ;
--l-yellow: #deb953;
--light: #fbfbfb ;
--n-road : -4em;
--p-road : 7em;

/* background-color: var(--green) ; */


}

还有loading页面的背景色

1
2
3
4
/* loading背景 */
.loading-bg, #loading-box .loading-left-bg, #loading-box .loading-right-bg{
background-color: #3f3f3f;
}

修改完毕就可以自定义你的豪华座驾!包括适配深色/浅色模式等都可以自定义!如果你想要引入其他无div的codepen动画,可以参考作者的codepen文件与我提供的css文件的差异来学习。