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

那么我们来开始吧！

样式预览

下载资源文件

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

立即下载

引入资源文件

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

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文件的差异来学习。