Love, Death & Robots加载动画

首先，在这个令人开心的时刻，让我们先感谢这个动画的css作者

加载动画预览也看那个作者链接吧，差不多，只是把颜色改了改

要做什么

butterfly版本：4.10

  1. 添加加载动画的两种文件：pug和styl，分别对应html和css文件
  2. 在主题中添加加载动画的入口
  • pug资源目录：themes/butterfly/layout/includes/loading/load_style
  • styl资源目录：themes/butterfly/source/css/_load_style
  • pug的配置入口位置：themes/butterfly/layout/includes/loading/fullpage-loading.pug
  • styl的配置入口位置：themes/butterfly/source/css/_layout/loading.styl

如果觉得上面东西很陌生的话，建议先看看前辈的自定义加载动画博客

开始操作

新建文件：themes/butterfly/layout/includes/loading/load_style/love-death-robots.pug

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#loading-box
  .loader-box
    .loader
      .container
        .carousel
          .love
          .love
          .love
          .love
          .love
          .love
          .love
      .container
        .carousel
          .death
          .death
          .death
          .death
          .death
          .death
          .death
      .container
        .carousel
          .robots
          .robots
          .robots
          .robots
          .robots
          .robots
          .robots

新建文件：themes/butterfly/source/css/_load_style/love-death-robots.styl

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
#loading-box
  &.loaded
    .loader-box
      display: none

  .loader-box
    position: fixed
    z-index: 1001
    display: flex
    justify-content: center
    align-items: center
    width: 100%
    height: 100vh
    background: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%)

    .loader
      display flex
      position absolute
      justify-items center
      align-items center
      gap 1rem
      height 55px
      width 200px
      overflow hidden

      .container
        &:nth-child(3)
          justify-content flex-start
          justify-items flex-start
          animation scroll-up 4s infinite ease-in-out
          animation-delay 3s

        &:nth-child(2)
          justify-content flex-end
          justify-items flex-end
          animation scroll-down 4s infinite ease-in-out
          animation-delay 3s

        &:nth-child(1)
          justify-content flex-end
          justify-items flex-end
          animation scroll-down 3s infinite ease-in-out
          animation-delay 3s

      &:hover
        animation none

    .container
      width 100%
      display flex
      flex-direction column
      height 200px
      position relative
      align-items center

    .carousel
      display flex
      gap 1rem
      flex-direction column
      position absolute
      width 100%
      transform-origin center
      animation-delay 2s

    .love
      background black
      display flex
      width 30px
      height 30px
      position relative
      align-items center
      justify-content center
      left 8px
      margin 0.8rem 4px
      transform rotate(45deg)
      animation-delay 2s

      &::before
        left -16px

      &::after
        top -16px

    .love::before, .love::after
      content ''
      position absolute
      width 30px
      height 30px
      border-radius 50%
      background darkred

    .death
      display flex
      width 100%
      height 55px
      position relative
      align-items center
      justify-content center
      animation rotation 3s infinite ease-in-out
      animation-delay 1s

      &:after
        content ''
        height 63px
        position absolute
        border-left 12px solid black
        transform rotate(45deg)
        border-radius 8px
        top -4px

      &:before
        content ''
        height 60px
        position absolute
        border-left 12px solid darkred
        transform rotate(-45deg)

    .robots
      display flex
      width 100%
      height 55px
      justify-content space-between
      background-color black
      border-radius 0 8px 8px
      padding 8px
      animation-delay 5s

      &::after
        content ''
        width 12px
        height 12px
        top 0
        left 0
        background-color darkred
        border-radius 50%
        animation-delay 2s
        animation blink 0.5s 2 forwards

      &::before
        content ''
        width 12px
        height 12px
        top 0
        left 0
        background-color darkred
        border-radius 50%
        animation-delay 2s
        animation blink 0.5s 2 forwards

@keyframes scroll-up {
  0% {
    transform: translateY(0);
    filter: blur(0);
  }

  30% {
    transform: translateY(-150%);
    filter: blur(10px);
  }

  60% {
    transform: translateY(0);
    filter: blur(0px);
  }
}

@keyframes scroll-down {
  0% {
    transform: translateY(0);
    filter: blur(0);
  }

  30% {
    transform: translateY(150%);
    filter: blur(10px);
  }

  60% {
    transform: translateY(0);
    filter: blur(0px);
  }
}

@keyframes rotation {
  20%, 100% {
    transform: rotate(180deg);
  }
}

@keyframes blink {
  0% {
    height: 0;
  }

  20% {
    height: 12px;
  }

  100% {
    height: 12px;
  }
}

添加加载动画的pug入口：themes/butterfly/layout/includes/loading/fullpage-loading.pug

1
2
when 'love-death-robots'
  include ./load_style/love-death-robots.pug

添加加载动画的styl入口：themes/butterfly/source/css/_layout/loading.styl

1
2
else if hexo-config('preloader.load_style') == 'love-death-robots'
  @import './_load_style/love-death-robots'

最后在_config.butterfly.yml修改主题

1
2
3
preloader:
  enable: true
  load_style: love-death-robots

最后吐槽一下，这个加载动画有点慢，来不及看到过程就进入页面了

如果非要看的话：为了看到加载动画，我们可以手动调整浏览器的网速，打开F12-网络，在菜单栏找到默认的”No throttling“字样（不节流），改成”Slow 3G“就可以了

笑死