抱歉，您的浏览器无法访问本站
本页面需要浏览器支持（启用）JavaScript
了解详情 >

真·彩虹猫加载动画

站点折腾

发布于：

次浏览

之前有人反映我的站点特别卡
也不是没有去优化。。。。。但是依然有人说很卡
我感觉是加载动画的问题，刚好我之前找到html+css实现彩虹猫
于是我给这个抄下来了
不废话，正片开始！

教程开始！

新建js

首先，新建[Blogroot]\themes\butterfly\source\js\nyan.js，内容如下：

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
function cycleFrames (_nyanCat, _currentFrame) {
	_nyanCat.classList = []
	_nyanCat.classList.add(`frame${_currentFrame}`)
}

function replicateSparks (_sparksRow) {
	const numberOfRowsToCoverEntireScreen = Math.ceil(document.getElementById("loading-box").offsetHeight / _sparksRow.offsetHeight)
	const newSparksRows = document.createElement('div')

	for (let a = 0; a < numberOfRowsToCoverEntireScreen-1; a++) {
		newSparksRows.append(_sparksRow.cloneNode(true))
	}

	document.getElementById("loading-box").prepend(newSparksRows)
}

(function () {
	let nyanCat = document.getElementById('nyan-cat')
	let currentFrame = 1

	replicateSparks(document.getElementsByClassName('sparks-combo')[0])

	setInterval(function () {
		currentFrame = (currentFrame % 6) + 1
		cycleFrames(nyanCat, currentFrame)
	}, 70)
})()

这个是用来自动生成div，使得星星可以铺满屏幕

选择方案

以下三种方案任意选择一种：

店长魔改方案

如果你博客有参考店长的这个教程：Loading Animation
那就按照这个教程魔改就行

  1. 修改[Blogroot]\themes\butterfly\layout\includes\loading\loading.pug
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    if theme.preloader.enable
      case theme.preloader.load_style    
        when 'gear'
          include ./load_style/gear.pug
        when 'ironheart'
          include ./load_style/ironheart.pug
        when 'scarecrow'
          include ./load_style/scarecrow.pug
        when 'triangles'
          include ./load_style/triangles.pug
        when 'wizard'
          include ./load_style/wizard.pug
        when 'image'
          include ./load_style/image.pug
    +    when 'nyancat'
    +      include ./load_style/nyancat.pug
        default
          include ./load_style/default.pug
  2. 新建[Blogroot]\themes\butterfly\layout\includes\loading\load_style\nyancat.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
    31
    32
    33
    34
    #loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
        .sparks-combo
            .spark
            .spark
            .spark
            .spark
        .rainbow
            span
        .nyan-cat
            .feet
            .tail
                span
            .body
            .head
        script(src="/js/nyan.js")

    script.
        const preloader = {
            endLoading: () => {
                document.body.style.overflow = 'auto';
                document.getElementById('loading-box').classList.add("loaded")
            },
            initLoading: () => {
                document.body.style.overflow = '';
                document.getElementById('loading-box').classList.remove("loaded")

            }
        }
        window.addEventListener('load',()=> { preloader.endLoading() })

        if (!{theme.pjax && theme.pjax.enable}) {
            document.addEventListener('pjax:send', () => { preloader.initLoading() })
            document.addEventListener('pjax:complete', () => { preloader.endLoading() })
        }
  3. 修改[Blogroot]\themes\butterfly\source\css\_layout\loading.styl
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18

    if hexo-config('preloader.enable')
      if hexo-config('preloader.load_style') == 'gear'
        @import './_load_style/gear'
      else if hexo-config('preloader.load_style') == 'ironheart'
        @import './_load_style/ironheart'
      else if hexo-config('preloader.load_style') == 'scarecrow'
        @import './_load_style/scarecrow'
      else if hexo-config('preloader.load_style') == 'triangles'
        @import './_load_style/triangles'
      else if hexo-config('preloader.load_style') == 'wizard'
        @import './_load_style/wizard'
      else if hexo-config('preloader.load_style') == 'image'
        @import './_load_style/image'
    +  else if hexo-config('preloader.load_style') == 'nyancat'
    +    @import './_load_style/nyancat'
      else
        @import './_load_style/default'
  4. 新建[Blogroot]\themes\butterfly\source\css\_load_style\nyancat.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
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
#loading-box
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #036;
  overflow: hidden;
  position : fixed;
  font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
  z-index: 9999;
  opacity: 1;

  &.loaded
    opacity: 0;
    z-index: -1000;

  .sprite, .body, .head, .rainbow span, .feet, .tail span, .stars .star
    position: absolute;
    background-position: 0 0px,0 5px,0 10px,0 15px,0 20px,0 25px,0 30px,0 35px,0 40px,0 45px,0 50px,0 55px,0 60px,0 65px,0 70px,0 75px,0 80px,0 85px,0 90px,0 95px,0 100px,0 105px,0 110px,0 115px,0 120px,0 125px;
    background-size: 100% 5px;
    background-repeat: no-repeat;


  .nyan-cat
    position: fixed;
    left: 50%;
    top: 50%;
    width: 165px;
    height: 100px;
    margin-top: -50px;
    margin-left: -82px;
    -webkit-animation: nyan 400ms step-start infinite;
    animation: nyan 400ms step-start infinite;
    z-index: 19999;

  .body
    left: 35px;
    top: 0;
    width: 105px;
    height: 90px;

  .head
    left: 85px;
    top: 25px;
    width: 80px;
    height: 65px;
    -webkit-animation: head 400ms linear infinite;
    animation: head 400ms linear infinite;

  .rainbow
    position: fixed;
    left: 0;
    top: 50%;
    margin-top: -35px;
    width: 50%;
    height: 65px;
    overflow: hidden;
    z-index: 18888;

    span
      display: block;
      position: relative;
      top: 0;
      width: 100%;
      height: 130px;
      background-size: 80px 5px;
      background-repeat: repeat-x;
      -webkit-animation: rainbow 400ms step-start infinite;
      animation: rainbow 400ms step-start infinite;

  .feet
    left: 20px;
    top: 75px;
    width: 120px;
    height: 25px;
    -webkit-animation: feet 400ms infinite;
    animation: feet 400ms infinite;

  .tail
    position: relative;
    width: 25px;
    height: 30px;
    overflow: hidden;
    top: 30px;
    left: 10px;

    span
      width: 25px;
      height: 120px;
      -webkit-animation: tail 200ms step-start infinite alternate;
      animation: tail 200ms step-start infinite alternate;
  
  .sparks-combo 
    height: 300px;
    width: 200%;
    position: relative;
    animation: woosh 700ms 0ms linear infinite both;

  .spark 
    z-index: 1;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: transparent;
    background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x;

    &:before 
      background: linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x;

    &:after 
      background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x;

    &:before,&:after 
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      background-color: transparent;
    
    

    &:nth-child(1) 
      z-index: 3;
      top: 0;
      left: 20px;
      animation: sparkly 700ms 0ms steps(1) infinite both;

    &:nth-child(1):before 
      animation: sparkly-before 700ms 0ms steps(1) infinite both;

    &:nth-child(1):after 
      animation: sparkly-after 700ms 0ms steps(1) infinite both;

    &:nth-child(2) 
      top: 40px;
      left: 170px;
      animation: sparkly 700ms 200ms steps(1) infinite both;

    &:nth-child(2):before 
      animation: sparkly-before 700ms 200ms steps(1) infinite both;

    &:nth-child(2):after 
      animation: sparkly-after 700ms 200ms steps(1) infinite both;

    &:nth-child(3) 
      top: 100px;
      left: 320px;
      animation: sparkly 700ms 400ms steps(1) infinite both;

    &:nth-child(3):before 
      animation: sparkly-before 700ms 400ms steps(1) infinite both;

    &:nth-child(3):after 
      animation: sparkly-after 700ms 400ms steps(1) infinite both;

    &:nth-child(4) 
      top: 150px;
      left: 200px;
      animation: sparkly 700ms 600ms steps(1) infinite both;

    &:nth-child(4):before 
      animation: sparkly-before 700ms 600ms steps(1) infinite both;

    &:nth-child(4):after 
      animation: sparkly-after 700ms 600ms steps(1) infinite both;


  .body
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #f9d28f 10px, #f9d28f 95px, #000000 95px, #000000 100px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 20px, #fe91fe 20px, #fe91fe 85px, #f9d28f 85px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 15px, #fe91fe 15px, #fe91fe 45px, #f90297 45px, #f90297 50px, #fe91fe 50px, #fe91fe 60px, #f90297 60px, #f90297 65px, #fe91fe 65px, #fe91fe 90px, #f9d28f 90px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 20px, #f90297 20px, #f90297 25px, #fe91fe 25px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 80px, #f90297 80px, #f90297 85px, #fe91fe 85px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 40px, #f90297 40px, #f90297 45px, #fe91fe 45px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 25px, #f90297 25px, #f90297 30px, #fe91fe 30px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 45px, #f90297 45px, #f90297 50px, #fe91fe 50px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 15px, #f90297 15px, #f90297 20px, #fe91fe 20px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 35px, #f90297 35px, #f90297 40px, #fe91fe 40px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 15px, #fe91fe 15px, #fe91fe 20px, #f90297 20px, #f90297 25px, #fe91fe 25px, #fe91fe 90px, #f9d28f 90px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 20px, #fe91fe 20px, #fe91fe 85px, #f9d28f 85px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #f9d28f 10px, #f9d28f 95px, #000000 95px, #000000 100px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px);
    
  .head 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 60px, #000000 60px, #000000 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 20px, #000000 20px, #000000 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 55px, #000000 55px, #000000 60px, #9d9d9d 60px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 25px, #000000 25px, #000000 30px, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) 50px, #000000 50px, #000000 55px, #9d9d9d 55px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 30px, #000000 30px, #000000 35px, #000000 35px, #000000 50px, #9d9d9d 50px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #ffffff 20px, #ffffff 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 55px, #ffffff 55px, #ffffff 60px, #000000 60px, #000000 65px, #9d9d9d 65px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px, #000000 30px, #9d9d9d 30px, #9d9d9d 45px, #000000 45px, #000000 50px, #9d9d9d 50px, #9d9d9d 55px, #000000 55px, #000000 65px, #9d9d9d 65px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 10px, #ff9593 10px, #ff9593 20px, #9d9d9d 20px, #9d9d9d 65px, #ff9593 65px, #ff9593 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 10px, #ff9593 10px, #ff9593 20px, #9d9d9d 20px, #9d9d9d 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 40px, #000000 40px, #000000 45px, #9d9d9d 45px, #9d9d9d 55px, #000000 55px, #000000 60px, #9d9d9d 60px, #9d9d9d 65px, #ff9593 65px, #ff9593 75px, #000000 75px, #000000 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 25px, #000000 25px, #000000 60px, #9d9d9d 60px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 15px, #9d9d9d 15px, #9d9d9d 65px, #000000 65px, #000000 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 65px, rgba(0, 0, 0, 0) 65px, rgba(0, 0, 0, 0) 80px);

  .rainbow > span 
    background-image: linear-gradient(to right, #fe0000 0%, #fe0000 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fe0000 0%, #fe0000 100%), linear-gradient(to right, #ffa500 0%, #ffa500 50%, #fe0000 50%, #fe0000 100%), linear-gradient(to right, #ffa500 0%, #ffa500 100%), linear-gradient(to right, #ffff00 0%, #ffff00 50%, #ffa500 50%, #ffa500 100%), linear-gradient(to right, #ffff00 0%, #ffff00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 50%, #ffff00 50%, #ffff00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 100%), linear-gradient(to right, #009eff 0%, #009eff 50%, #00fb00 50%, #00fb00 100%), linear-gradient(to right, #009eff 0%, #009eff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 50%, #009eff 50%, #009eff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #6531ff 50%, #6531ff 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #fe0000 50%, #fe0000 100%), linear-gradient(to right, #fe0000 0%, #fe0000 100%), linear-gradient(to right, #fe0000 0%, #fe0000 50%, #ffa500 50%, #ffa500 100%), linear-gradient(to right, #ffa500 0%, #ffa500 100%), linear-gradient(to right, #ffa500 0%, #ffa500 50%, #ffff00 50%, #ffff00 100%), linear-gradient(to right, #ffff00 0%, #ffff00 100%), linear-gradient(to right, #ffff00 0%, #ffff00 50%, #00fb00 50%, #00fb00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 50%, #009eff 50%, #009eff 100%), linear-gradient(to right, #009eff 0%, #009eff 100%), linear-gradient(to right, #009eff 0%, #009eff 50%, #6531ff 50%, #6531ff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);


  .feet 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 110px, rgba(0, 0, 0, 0) 110px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px, #000000 35px, #9d9d9d 35px, #9d9d9d 40px, #000000 40px, #000000 80px, #9d9d9d 80px, #9d9d9d 110px, #000000 110px, #000000 115px, rgba(0, 0, 0, 0) 115px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px, #000000 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 40px, #000000 40px, #000000 45px, rgba(0, 0, 0, 0) 45px, rgba(0, 0, 0, 0) 75px, #000000 75px, #000000 80px, #9d9d9d 80px, #9d9d9d 90px, #000000 90px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 100px, #000000 100px, #000000 105px, #9d9d9d 105px, #9d9d9d 115px, #000000 115px, #000000 120px), linear-gradient(to right, #000000 0%, #000000 15px, rgba(0, 0, 0, 0) 15px, rgba(0, 0, 0, 0) 30px, #000000 30px, #000000 45px, rgba(0, 0, 0, 0) 45px, rgba(0, 0, 0, 0) 80px, #000000 80px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px, #000000 105px, #000000 120px);


  .tail > span 
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 15px, rgba(0, 0, 0, 0) 15px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px, #000000 20px, rgba(0, 0, 0, 0) 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 20px, rgba(0, 0, 0, 0) 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, #000000 0%, #000000 10px, #9d9d9d 10px, #9d9d9d 25px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 15px, #9d9d9d 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 20px, #000000 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 15px, rgba(0, 0, 0, 0) 15px);

@-webkit-keyframes rainbow {
  0% {
    top: 0;
  }
  50% {
    top: 0;
  }
  100% {
    top: -65px;
  }
}

@keyframes rainbow {
  0% {
    top: 0;
  }
  50% {
    top: 0;
  }
  100% {
    top: -65px;
  }
}
@-webkit-keyframes nyan {
  0% {
    margin-top: -50px;
  }
  10% {
    margin-top: -50px;
  }
  80% {
    margin-top: -53px;
  }
  100% {
    margin-top: -50px;
  }
}
@keyframes nyan {
  0% {
    margin-top: -50px;
  }
  10% {
    margin-top: -50px;
  }
  80% {
    margin-top: -53px;
  }
  100% {
    margin-top: -50px;
  }
}
@-webkit-keyframes feet {
  0% {
    left: 20px;
  }
  100% {
    left: 30px;
  }
}
@keyframes feet {
  0% {
    left: 20px;
  }
  100% {
    left: 30px;
  }
}
@-webkit-keyframes head {
  0% {
    top: 25px;
    left: 85px;
  }
  24.99% {
    top: 25px;
    left: 85px;
  }
  25% {
    top: 22px;
    left: 88px;
  }
  49.99% {
    top: 22px;
    left: 88px;
  }
  50% {
    top: 22px;
    left: 85px;
  }
  74.99% {
    top: 22px;
    left: 85px;
  }
  75% {
    top: 22px;
    left: 82px;
  }
  99.99% {
    top: 22px;
    left: 82px;
  }
  100% {
    top: 25px;
    left: 85px;
  }
}
@keyframes head {
  0% {
    top: 25px;
    left: 85px;
  }
  24.99% {
    top: 25px;
    left: 85px;
  }
  25% {
    top: 22px;
    left: 88px;
  }
  49.99% {
    top: 22px;
    left: 88px;
  }
  50% {
    top: 22px;
    left: 85px;
  }
  74.99% {
    top: 22px;
    left: 85px;
  }
  75% {
    top: 22px;
    left: 82px;
  }
  99.99% {
    top: 22px;
    left: 82px;
  }
  100% {
    top: 25px;
    left: 85px;
  }
}
@-webkit-keyframes tail {
  0% {
    top: 0;
  }
  25% {
    top: 0;
  }
  49.99% {
    top: 0;
  }
  50% {
    top: -30px;
  }
  74.99% {
    top: -30px;
  }
  75% {
    top: -60px;
  }
  99.99% {
    top: -60px;
  }
  100% {
    top: -90px;
  }
}
@keyframes tail {
  0% {
    top: 0;
  }
  25% {
    top: 0;
  }
  49.99% {
    top: 0;
  }
  50% {
    top: -30px;
  }
  74.99% {
    top: -30px;
  }
  75% {
    top: -60px;
  }
  99.99% {
    top: -60px;
  }
  100% {
    top: -90px;
  }
}
@keyframes woosh {
  0% {
    left: 0px;
  }
  100% {
    left: -400px;
  }
}
@keyframes sparkly {
  0% {
    background-size: 400px 6px, 0 0, 0 0, 0 0;
    background-position: 17px 17px, 0 0, 0 0, 0 0;
  }
  16% {
    background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px;
    background-position: 17px 0, 34px 17px, 17px 34px, 0 17px;
  }
  33% {
    background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px;
    background-position: 17px 0, 34px 17px, 17px 34px, 0 17px;
  }
  50% {
    background-size: 400px 6px, 0 0, 0 0, 0 0;
    background-position: 17px 17px, 0 0, 0 0, 0 0;
  }
  66% {
    background-size: 400px 11px, 400px 11px, 0 0, 0 0;
    background-position: 17px 6px, 17px 23px, 0 0, 0 0;
  }
  83% {
    background-size: 0 0, 0 0, 400px 5px, 400px 5px;
    background-position: 0 0, 0 0, 11px 17px, 22px 17px;
  }
  100% {
    background-size: 400px 6px, 0 0, 0 0, 0 0;
    background-position: 17px 17px, 0 0, 0 0, 0 0;
  }
}
@keyframes sparkly-before {
  0% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  16% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  33% {
    background-size: 400px 5px, 400px 5px, 400px 5px, 400px 5px;
    background-position: 6px 6px, 29px 6px, 29px 29px, 6px 29px;
  }
  50% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  66% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  83% {
    background-size: 0 0, 0 0, 400px 5px, 400px 5px;
    background-position: 0 0, 0 0, 17px 12px, 17px 22px;
  }
  100% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
}
@keyframes sparkly-after {
  0% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  16% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  33% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  50% {
    background-size: 400px 11px, 400px 11px, 400px 6px, 400px 6px;
    background-position: 17px 0, 17px 29px, 0 17px, 29px 17px;
  }
  66% {
    background-size: 0 0, 0 0, 400px 6px, 400px 6px;
    background-position: 0 0, 0 0, 6px 17px, 23px 17px;
  }
  83% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
  100% {
    background-size: 0 0, 0 0, 0 0, 0 0;
    background-position: 0 0, 0 0, 0 0, 0 0;
  }
}
  1. 修改[Blogroot]\_config.butterfly.yml的preloader.load_style配置项
    1
    2
    3
    4
    preloader:
      enable: true
      load_color: '#000000' # '#37474f'
      load_style: nyancat # 这边改成nyancat

butterfly 4.5 以上方案

  1. 修改[Blogroot]\themes\butterfly\layout\includes\loading\fullpage-loading.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
    31
    32
    33
    34
    #loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
        .sparks-combo
            .spark
            .spark
            .spark
            .spark
        .rainbow
            span
        .nyan-cat
            .feet
            .tail
                span
            .body
            .head
        script(src="/js/nyan.js")

    script.
        const preloader = {
            endLoading: () => {
                document.body.style.overflow = 'auto';
                document.getElementById('loading-box').classList.add("loaded")
            },
            initLoading: () => {
                document.body.style.overflow = '';
                document.getElementById('loading-box').classList.remove("loaded")

            }
        }
        window.addEventListener('load',()=> { preloader.endLoading() })

        if (!{theme.pjax && theme.pjax.enable}) {
            document.addEventListener('pjax:send', () => { preloader.initLoading() })
            document.addEventListener('pjax:complete', () => { preloader.endLoading() })
        }
  2. 修改[Blogroot]\themes\butterfly\layout\includes\loading\index.pug，复制以下代码替换全部内容。
    1
    2
    3
    4
    5
    6
    7
    if theme.preloader.source === 1
      include ./fullpage-loading.pug
    else if theme.preloader.source === 2
      include ./pace.pug
    else
      include ./fullpage-loading.pug
      include ./pace.pug
  3. 修改[Blogroot]\themes\butterfly\source\css\_layout\loading.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
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    410
    411
    412
    413
    414
    415
    416
    417
    418
    419
    420
    421
    422
    423
    424
    425
    426
    427
    428
    429
    430
    431
    432
    433
    434
    435
    436
    437
    438
    439
    440
    441
    442
    443
    444
    445
    446
    447
    448
    449
    450
    451
    452
    453
    454
    455
    456
    457
    458
    459
    460
    461
    462
    463
    464
    465
    466
    467
    468
    469
    470
    471
    472
    473
    474
    475
    476
    477
    #loading-box
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background: #036;
      overflow: hidden;
      position : fixed;
      font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
      z-index: 9999;
      opacity: 1;

      &.loaded
        opacity: 0;
        z-index: -1000;

      .sprite, .body, .head, .rainbow span, .feet, .tail span, .stars .star
        position: absolute;
        background-position: 0 0px,0 5px,0 10px,0 15px,0 20px,0 25px,0 30px,0 35px,0 40px,0 45px,0 50px,0 55px,0 60px,0 65px,0 70px,0 75px,0 80px,0 85px,0 90px,0 95px,0 100px,0 105px,0 110px,0 115px,0 120px,0 125px;
        background-size: 100% 5px;
        background-repeat: no-repeat;


      .nyan-cat
        position: fixed;
        left: 50%;
        top: 50%;
        width: 165px;
        height: 100px;
        margin-top: -50px;
        margin-left: -82px;
        -webkit-animation: nyan 400ms step-start infinite;
        animation: nyan 400ms step-start infinite;
        z-index: 19999;

      .body
        left: 35px;
        top: 0;
        width: 105px;
        height: 90px;

      .head
        left: 85px;
        top: 25px;
        width: 80px;
        height: 65px;
        -webkit-animation: head 400ms linear infinite;
        animation: head 400ms linear infinite;

      .rainbow
        position: fixed;
        left: 0;
        top: 50%;
        margin-top: -35px;
        width: 50%;
        height: 65px;
        overflow: hidden;
        z-index: 18888;

        span
          display: block;
          position: relative;
          top: 0;
          width: 100%;
          height: 130px;
          background-size: 80px 5px;
          background-repeat: repeat-x;
          -webkit-animation: rainbow 400ms step-start infinite;
          animation: rainbow 400ms step-start infinite;

      .feet
        left: 20px;
        top: 75px;
        width: 120px;
        height: 25px;
        -webkit-animation: feet 400ms infinite;
        animation: feet 400ms infinite;

      .tail
        position: relative;
        width: 25px;
        height: 30px;
        overflow: hidden;
        top: 30px;
        left: 10px;

        span
          width: 25px;
          height: 120px;
          -webkit-animation: tail 200ms step-start infinite alternate;
          animation: tail 200ms step-start infinite alternate;
      
      .sparks-combo 
        height: 300px;
        width: 200%;
        position: relative;
        animation: woosh 700ms 0ms linear infinite both;

      .spark 
        z-index: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: transparent;
        background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x;

        &:before 
          background: linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x;

        &:after 
          background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x;

        &:before,&:after 
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: transparent;
        
        

        &:nth-child(1) 
          z-index: 3;
          top: 0;
          left: 20px;
          animation: sparkly 700ms 0ms steps(1) infinite both;

        &:nth-child(1):before 
          animation: sparkly-before 700ms 0ms steps(1) infinite both;

        &:nth-child(1):after 
          animation: sparkly-after 700ms 0ms steps(1) infinite both;

        &:nth-child(2) 
          top: 40px;
          left: 170px;
          animation: sparkly 700ms 200ms steps(1) infinite both;

        &:nth-child(2):before 
          animation: sparkly-before 700ms 200ms steps(1) infinite both;

        &:nth-child(2):after 
          animation: sparkly-after 700ms 200ms steps(1) infinite both;

        &:nth-child(3) 
          top: 100px;
          left: 320px;
          animation: sparkly 700ms 400ms steps(1) infinite both;

        &:nth-child(3):before 
          animation: sparkly-before 700ms 400ms steps(1) infinite both;

        &:nth-child(3):after 
          animation: sparkly-after 700ms 400ms steps(1) infinite both;

        &:nth-child(4) 
          top: 150px;
          left: 200px;
          animation: sparkly 700ms 600ms steps(1) infinite both;

        &:nth-child(4):before 
          animation: sparkly-before 700ms 600ms steps(1) infinite both;

        &:nth-child(4):after 
          animation: sparkly-after 700ms 600ms steps(1) infinite both;


      .body
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #f9d28f 10px, #f9d28f 95px, #000000 95px, #000000 100px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 20px, #fe91fe 20px, #fe91fe 85px, #f9d28f 85px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 15px, #fe91fe 15px, #fe91fe 45px, #f90297 45px, #f90297 50px, #fe91fe 50px, #fe91fe 60px, #f90297 60px, #f90297 65px, #fe91fe 65px, #fe91fe 90px, #f9d28f 90px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 20px, #f90297 20px, #f90297 25px, #fe91fe 25px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 80px, #f90297 80px, #f90297 85px, #fe91fe 85px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 40px, #f90297 40px, #f90297 45px, #fe91fe 45px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 25px, #f90297 25px, #f90297 30px, #fe91fe 30px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 45px, #f90297 45px, #f90297 50px, #fe91fe 50px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 15px, #f90297 15px, #f90297 20px, #fe91fe 20px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 35px, #f90297 35px, #f90297 40px, #fe91fe 40px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 15px, #fe91fe 15px, #fe91fe 20px, #f90297 20px, #f90297 25px, #fe91fe 25px, #fe91fe 90px, #f9d28f 90px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 20px, #fe91fe 20px, #fe91fe 85px, #f9d28f 85px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #f9d28f 10px, #f9d28f 95px, #000000 95px, #000000 100px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px);
        
      .head 
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 60px, #000000 60px, #000000 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 20px, #000000 20px, #000000 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 55px, #000000 55px, #000000 60px, #9d9d9d 60px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 25px, #000000 25px, #000000 30px, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) 50px, #000000 50px, #000000 55px, #9d9d9d 55px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 30px, #000000 30px, #000000 35px, #000000 35px, #000000 50px, #9d9d9d 50px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #ffffff 20px, #ffffff 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 55px, #ffffff 55px, #ffffff 60px, #000000 60px, #000000 65px, #9d9d9d 65px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px, #000000 30px, #9d9d9d 30px, #9d9d9d 45px, #000000 45px, #000000 50px, #9d9d9d 50px, #9d9d9d 55px, #000000 55px, #000000 65px, #9d9d9d 65px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 10px, #ff9593 10px, #ff9593 20px, #9d9d9d 20px, #9d9d9d 65px, #ff9593 65px, #ff9593 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 10px, #ff9593 10px, #ff9593 20px, #9d9d9d 20px, #9d9d9d 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 40px, #000000 40px, #000000 45px, #9d9d9d 45px, #9d9d9d 55px, #000000 55px, #000000 60px, #9d9d9d 60px, #9d9d9d 65px, #ff9593 65px, #ff9593 75px, #000000 75px, #000000 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 25px, #000000 25px, #000000 60px, #9d9d9d 60px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 15px, #9d9d9d 15px, #9d9d9d 65px, #000000 65px, #000000 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 65px, rgba(0, 0, 0, 0) 65px, rgba(0, 0, 0, 0) 80px);

      .rainbow > span 
        background-image: linear-gradient(to right, #fe0000 0%, #fe0000 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fe0000 0%, #fe0000 100%), linear-gradient(to right, #ffa500 0%, #ffa500 50%, #fe0000 50%, #fe0000 100%), linear-gradient(to right, #ffa500 0%, #ffa500 100%), linear-gradient(to right, #ffff00 0%, #ffff00 50%, #ffa500 50%, #ffa500 100%), linear-gradient(to right, #ffff00 0%, #ffff00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 50%, #ffff00 50%, #ffff00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 100%), linear-gradient(to right, #009eff 0%, #009eff 50%, #00fb00 50%, #00fb00 100%), linear-gradient(to right, #009eff 0%, #009eff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 50%, #009eff 50%, #009eff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #6531ff 50%, #6531ff 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #fe0000 50%, #fe0000 100%), linear-gradient(to right, #fe0000 0%, #fe0000 100%), linear-gradient(to right, #fe0000 0%, #fe0000 50%, #ffa500 50%, #ffa500 100%), linear-gradient(to right, #ffa500 0%, #ffa500 100%), linear-gradient(to right, #ffa500 0%, #ffa500 50%, #ffff00 50%, #ffff00 100%), linear-gradient(to right, #ffff00 0%, #ffff00 100%), linear-gradient(to right, #ffff00 0%, #ffff00 50%, #00fb00 50%, #00fb00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 50%, #009eff 50%, #009eff 100%), linear-gradient(to right, #009eff 0%, #009eff 100%), linear-gradient(to right, #009eff 0%, #009eff 50%, #6531ff 50%, #6531ff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);


      .feet 
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 110px, rgba(0, 0, 0, 0) 110px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px, #000000 35px, #9d9d9d 35px, #9d9d9d 40px, #000000 40px, #000000 80px, #9d9d9d 80px, #9d9d9d 110px, #000000 110px, #000000 115px, rgba(0, 0, 0, 0) 115px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px, #000000 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 40px, #000000 40px, #000000 45px, rgba(0, 0, 0, 0) 45px, rgba(0, 0, 0, 0) 75px, #000000 75px, #000000 80px, #9d9d9d 80px, #9d9d9d 90px, #000000 90px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 100px, #000000 100px, #000000 105px, #9d9d9d 105px, #9d9d9d 115px, #000000 115px, #000000 120px), linear-gradient(to right, #000000 0%, #000000 15px, rgba(0, 0, 0, 0) 15px, rgba(0, 0, 0, 0) 30px, #000000 30px, #000000 45px, rgba(0, 0, 0, 0) 45px, rgba(0, 0, 0, 0) 80px, #000000 80px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px, #000000 105px, #000000 120px);


      .tail > span 
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 15px, rgba(0, 0, 0, 0) 15px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px, #000000 20px, rgba(0, 0, 0, 0) 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 20px, rgba(0, 0, 0, 0) 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, #000000 0%, #000000 10px, #9d9d9d 10px, #9d9d9d 25px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 15px, #9d9d9d 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 20px, #000000 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 15px, rgba(0, 0, 0, 0) 15px);

    @-webkit-keyframes rainbow {
      0% {
        top: 0;
      }
      50% {
        top: 0;
      }
      100% {
        top: -65px;
      }
    }

    @keyframes rainbow {
      0% {
        top: 0;
      }
      50% {
        top: 0;
      }
      100% {
        top: -65px;
      }
    }
    @-webkit-keyframes nyan {
      0% {
        margin-top: -50px;
      }
      10% {
        margin-top: -50px;
      }
      80% {
        margin-top: -53px;
      }
      100% {
        margin-top: -50px;
      }
    }
    @keyframes nyan {
      0% {
        margin-top: -50px;
      }
      10% {
        margin-top: -50px;
      }
      80% {
        margin-top: -53px;
      }
      100% {
        margin-top: -50px;
      }
    }
    @-webkit-keyframes feet {
      0% {
        left: 20px;
      }
      100% {
        left: 30px;
      }
    }
    @keyframes feet {
      0% {
        left: 20px;
      }
      100% {
        left: 30px;
      }
    }
    @-webkit-keyframes head {
      0% {
        top: 25px;
        left: 85px;
      }
      24.99% {
        top: 25px;
        left: 85px;
      }
      25% {
        top: 22px;
        left: 88px;
      }
      49.99% {
        top: 22px;
        left: 88px;
      }
      50% {
        top: 22px;
        left: 85px;
      }
      74.99% {
        top: 22px;
        left: 85px;
      }
      75% {
        top: 22px;
        left: 82px;
      }
      99.99% {
        top: 22px;
        left: 82px;
      }
      100% {
        top: 25px;
        left: 85px;
      }
    }
    @keyframes head {
      0% {
        top: 25px;
        left: 85px;
      }
      24.99% {
        top: 25px;
        left: 85px;
      }
      25% {
        top: 22px;
        left: 88px;
      }
      49.99% {
        top: 22px;
        left: 88px;
      }
      50% {
        top: 22px;
        left: 85px;
      }
      74.99% {
        top: 22px;
        left: 85px;
      }
      75% {
        top: 22px;
        left: 82px;
      }
      99.99% {
        top: 22px;
        left: 82px;
      }
      100% {
        top: 25px;
        left: 85px;
      }
    }
    @-webkit-keyframes tail {
      0% {
        top: 0;
      }
      25% {
        top: 0;
      }
      49.99% {
        top: 0;
      }
      50% {
        top: -30px;
      }
      74.99% {
        top: -30px;
      }
      75% {
        top: -60px;
      }
      99.99% {
        top: -60px;
      }
      100% {
        top: -90px;
      }
    }
    @keyframes tail {
      0% {
        top: 0;
      }
      25% {
        top: 0;
      }
      49.99% {
        top: 0;
      }
      50% {
        top: -30px;
      }
      74.99% {
        top: -30px;
      }
      75% {
        top: -60px;
      }
      99.99% {
        top: -60px;
      }
      100% {
        top: -90px;
      }
    }
    @keyframes woosh {
      0% {
        left: 0px;
      }
      100% {
        left: -400px;
      }
    }
    @keyframes sparkly {
      0% {
        background-size: 400px 6px, 0 0, 0 0, 0 0;
        background-position: 17px 17px, 0 0, 0 0, 0 0;
      }
      16% {
        background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px;
        background-position: 17px 0, 34px 17px, 17px 34px, 0 17px;
      }
      33% {
        background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px;
        background-position: 17px 0, 34px 17px, 17px 34px, 0 17px;
      }
      50% {
        background-size: 400px 6px, 0 0, 0 0, 0 0;
        background-position: 17px 17px, 0 0, 0 0, 0 0;
      }
      66% {
        background-size: 400px 11px, 400px 11px, 0 0, 0 0;
        background-position: 17px 6px, 17px 23px, 0 0, 0 0;
      }
      83% {
        background-size: 0 0, 0 0, 400px 5px, 400px 5px;
        background-position: 0 0, 0 0, 11px 17px, 22px 17px;
      }
      100% {
        background-size: 400px 6px, 0 0, 0 0, 0 0;
        background-position: 17px 17px, 0 0, 0 0, 0 0;
      }
    }
    @keyframes sparkly-before {
      0% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
      16% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
      33% {
        background-size: 400px 5px, 400px 5px, 400px 5px, 400px 5px;
        background-position: 6px 6px, 29px 6px, 29px 29px, 6px 29px;
      }
      50% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
      66% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
      83% {
        background-size: 0 0, 0 0, 400px 5px, 400px 5px;
        background-position: 0 0, 0 0, 17px 12px, 17px 22px;
      }
      100% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
    }
    @keyframes sparkly-after {
      0% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
      16% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
      33% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
      50% {
        background-size: 400px 11px, 400px 11px, 400px 6px, 400px 6px;
        background-position: 17px 0, 17px 29px, 0 17px, 29px 17px;
      }
      66% {
        background-size: 0 0, 0 0, 400px 6px, 400px 6px;
        background-position: 0 0, 0 0, 6px 17px, 23px 17px;
      }
      83% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
      100% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
    }
    最后修改_config.butterfly.yml中preloader选项, 改完以后source: 1为满屏加载无pace胶囊,source: 2为pace胶囊无满屏动画, source: 3是两者都启用。（这边懒得说就搬运的鱼佬那加载动画的教程了。。。。。反正都一样。。。。。）
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    # Loading Animation (加载动画)
    preloader:
      enable: true
      # source
      # 1. fullpage-loading
      # 2. pace (progress bar)
      # else all
      source: 3
      # pace theme (see https://codebyzach.github.io/pace/)
      pace_css_url: /css/progress_bar.css
      avatar: # 自定义头像

butterfly 4.4.2 以下版本方案

  1. 修改[Blogroot]\themes\butterfly\source\css\_layout\loading.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
    203
    204
    205
    206
    207
    208
    209
    210
    211
    212
    213
    214
    215
    216
    217
    218
    219
    220
    221
    222
    223
    224
    225
    226
    227
    228
    229
    230
    231
    232
    233
    234
    235
    236
    237
    238
    239
    240
    241
    242
    243
    244
    245
    246
    247
    248
    249
    250
    251
    252
    253
    254
    255
    256
    257
    258
    259
    260
    261
    262
    263
    264
    265
    266
    267
    268
    269
    270
    271
    272
    273
    274
    275
    276
    277
    278
    279
    280
    281
    282
    283
    284
    285
    286
    287
    288
    289
    290
    291
    292
    293
    294
    295
    296
    297
    298
    299
    300
    301
    302
    303
    304
    305
    306
    307
    308
    309
    310
    311
    312
    313
    314
    315
    316
    317
    318
    319
    320
    321
    322
    323
    324
    325
    326
    327
    328
    329
    330
    331
    332
    333
    334
    335
    336
    337
    338
    339
    340
    341
    342
    343
    344
    345
    346
    347
    348
    349
    350
    351
    352
    353
    354
    355
    356
    357
    358
    359
    360
    361
    362
    363
    364
    365
    366
    367
    368
    369
    370
    371
    372
    373
    374
    375
    376
    377
    378
    379
    380
    381
    382
    383
    384
    385
    386
    387
    388
    389
    390
    391
    392
    393
    394
    395
    396
    397
    398
    399
    400
    401
    402
    403
    404
    405
    406
    407
    408
    409
    410
    411
    412
    413
    414
    415
    416
    417
    418
    419
    420
    421
    422
    423
    424
    425
    426
    427
    428
    429
    430
    431
    432
    433
    434
    435
    436
    437
    438
    439
    440
    441
    442
    443
    444
    445
    446
    447
    448
    449
    450
    451
    452
    453
    454
    455
    456
    457
    458
    459
    460
    461
    462
    463
    464
    465
    466
    467
    468
    469
    470
    471
    472
    473
    474
    475
    476
    477
    #loading-box
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      background: #036;
      overflow: hidden;
      position : fixed;
      font: 13px/1.4 Helvetica, arial, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
      z-index: 9999;
      opacity: 1;

      &.loaded
        opacity: 0;
        z-index: -1000;

      .sprite, .body, .head, .rainbow span, .feet, .tail span, .stars .star
        position: absolute;
        background-position: 0 0px,0 5px,0 10px,0 15px,0 20px,0 25px,0 30px,0 35px,0 40px,0 45px,0 50px,0 55px,0 60px,0 65px,0 70px,0 75px,0 80px,0 85px,0 90px,0 95px,0 100px,0 105px,0 110px,0 115px,0 120px,0 125px;
        background-size: 100% 5px;
        background-repeat: no-repeat;


      .nyan-cat
        position: fixed;
        left: 50%;
        top: 50%;
        width: 165px;
        height: 100px;
        margin-top: -50px;
        margin-left: -82px;
        -webkit-animation: nyan 400ms step-start infinite;
        animation: nyan 400ms step-start infinite;
        z-index: 19999;

      .body
        left: 35px;
        top: 0;
        width: 105px;
        height: 90px;

      .head
        left: 85px;
        top: 25px;
        width: 80px;
        height: 65px;
        -webkit-animation: head 400ms linear infinite;
        animation: head 400ms linear infinite;

      .rainbow
        position: fixed;
        left: 0;
        top: 50%;
        margin-top: -35px;
        width: 50%;
        height: 65px;
        overflow: hidden;
        z-index: 18888;

        span
          display: block;
          position: relative;
          top: 0;
          width: 100%;
          height: 130px;
          background-size: 80px 5px;
          background-repeat: repeat-x;
          -webkit-animation: rainbow 400ms step-start infinite;
          animation: rainbow 400ms step-start infinite;

      .feet
        left: 20px;
        top: 75px;
        width: 120px;
        height: 25px;
        -webkit-animation: feet 400ms infinite;
        animation: feet 400ms infinite;

      .tail
        position: relative;
        width: 25px;
        height: 30px;
        overflow: hidden;
        top: 30px;
        left: 10px;

        span
          width: 25px;
          height: 120px;
          -webkit-animation: tail 200ms step-start infinite alternate;
          animation: tail 200ms step-start infinite alternate;
      
      .sparks-combo 
        height: 300px;
        width: 200%;
        position: relative;
        animation: woosh 700ms 0ms linear infinite both;

      .spark 
        z-index: 1;
        position: absolute;
        width: 100%;
        height: 100%;
        background-color: transparent;
        background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x;

        &:before 
          background: linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 5px, transparent 5px, transparent 400px) repeat-x;

        &:after 
          background: linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 6px, transparent 6px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x, linear-gradient(to right, white 0px, white 11px, transparent 11px, transparent 400px) repeat-x;

        &:before,&:after 
          content: '';
          position: absolute;
          width: 100%;
          height: 100%;
          background-color: transparent;
        
        

        &:nth-child(1) 
          z-index: 3;
          top: 0;
          left: 20px;
          animation: sparkly 700ms 0ms steps(1) infinite both;

        &:nth-child(1):before 
          animation: sparkly-before 700ms 0ms steps(1) infinite both;

        &:nth-child(1):after 
          animation: sparkly-after 700ms 0ms steps(1) infinite both;

        &:nth-child(2) 
          top: 40px;
          left: 170px;
          animation: sparkly 700ms 200ms steps(1) infinite both;

        &:nth-child(2):before 
          animation: sparkly-before 700ms 200ms steps(1) infinite both;

        &:nth-child(2):after 
          animation: sparkly-after 700ms 200ms steps(1) infinite both;

        &:nth-child(3) 
          top: 100px;
          left: 320px;
          animation: sparkly 700ms 400ms steps(1) infinite both;

        &:nth-child(3):before 
          animation: sparkly-before 700ms 400ms steps(1) infinite both;

        &:nth-child(3):after 
          animation: sparkly-after 700ms 400ms steps(1) infinite both;

        &:nth-child(4) 
          top: 150px;
          left: 200px;
          animation: sparkly 700ms 600ms steps(1) infinite both;

        &:nth-child(4):before 
          animation: sparkly-before 700ms 600ms steps(1) infinite both;

        &:nth-child(4):after 
          animation: sparkly-after 700ms 600ms steps(1) infinite both;


      .body
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #f9d28f 10px, #f9d28f 95px, #000000 95px, #000000 100px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 20px, #fe91fe 20px, #fe91fe 85px, #f9d28f 85px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 15px, #fe91fe 15px, #fe91fe 45px, #f90297 45px, #f90297 50px, #fe91fe 50px, #fe91fe 60px, #f90297 60px, #f90297 65px, #fe91fe 65px, #fe91fe 90px, #f9d28f 90px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 20px, #f90297 20px, #f90297 25px, #fe91fe 25px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 80px, #f90297 80px, #f90297 85px, #fe91fe 85px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 40px, #f90297 40px, #f90297 45px, #fe91fe 45px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 25px, #f90297 25px, #f90297 30px, #fe91fe 30px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 45px, #f90297 45px, #f90297 50px, #fe91fe 50px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 15px, #f90297 15px, #f90297 20px, #fe91fe 20px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 10px, #fe91fe 10px, #fe91fe 35px, #f90297 35px, #f90297 40px, #fe91fe 40px, #fe91fe 95px, #f9d28f 95px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 15px, #fe91fe 15px, #fe91fe 20px, #f90297 20px, #f90297 25px, #fe91fe 25px, #fe91fe 90px, #f9d28f 90px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, #000000 0%, #000000 5px, #f9d28f 5px, #f9d28f 20px, #fe91fe 20px, #fe91fe 85px, #f9d28f 85px, #f9d28f 100px, #000000 100px, #000000 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #f9d28f 10px, #f9d28f 95px, #000000 95px, #000000 100px, rgba(0, 0, 0, 0) 100px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px);
        
      .head 
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 60px, #000000 60px, #000000 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 105px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 20px, #000000 20px, #000000 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 55px, #000000 55px, #000000 60px, #9d9d9d 60px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 25px, #000000 25px, #000000 30px, rgba(0, 0, 0, 0) 30px, rgba(0, 0, 0, 0) 50px, #000000 50px, #000000 55px, #9d9d9d 55px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 30px, #000000 30px, #000000 35px, #000000 35px, #000000 50px, #9d9d9d 50px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #ffffff 20px, #ffffff 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 55px, #ffffff 55px, #ffffff 60px, #000000 60px, #000000 65px, #9d9d9d 65px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px, #000000 30px, #9d9d9d 30px, #9d9d9d 45px, #000000 45px, #000000 50px, #9d9d9d 50px, #9d9d9d 55px, #000000 55px, #000000 65px, #9d9d9d 65px, #9d9d9d 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 10px, #ff9593 10px, #ff9593 20px, #9d9d9d 20px, #9d9d9d 65px, #ff9593 65px, #ff9593 75px, #000000 75px, #000000 80px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 10px, #ff9593 10px, #ff9593 20px, #9d9d9d 20px, #9d9d9d 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 40px, #000000 40px, #000000 45px, #9d9d9d 45px, #9d9d9d 55px, #000000 55px, #000000 60px, #9d9d9d 60px, #9d9d9d 65px, #ff9593 65px, #ff9593 75px, #000000 75px, #000000 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 25px, #000000 25px, #000000 60px, #9d9d9d 60px, #9d9d9d 70px, #000000 70px, #000000 75px, rgba(0, 0, 0, 0) 75px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 15px, #9d9d9d 15px, #9d9d9d 65px, #000000 65px, #000000 70px, rgba(0, 0, 0, 0) 70px, rgba(0, 0, 0, 0) 80px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 65px, rgba(0, 0, 0, 0) 65px, rgba(0, 0, 0, 0) 80px);

      .rainbow > span 
        background-image: linear-gradient(to right, #fe0000 0%, #fe0000 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fe0000 0%, #fe0000 100%), linear-gradient(to right, #ffa500 0%, #ffa500 50%, #fe0000 50%, #fe0000 100%), linear-gradient(to right, #ffa500 0%, #ffa500 100%), linear-gradient(to right, #ffff00 0%, #ffff00 50%, #ffa500 50%, #ffa500 100%), linear-gradient(to right, #ffff00 0%, #ffff00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 50%, #ffff00 50%, #ffff00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 100%), linear-gradient(to right, #009eff 0%, #009eff 50%, #00fb00 50%, #00fb00 100%), linear-gradient(to right, #009eff 0%, #009eff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 50%, #009eff 50%, #009eff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #6531ff 50%, #6531ff 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 50%, #fe0000 50%, #fe0000 100%), linear-gradient(to right, #fe0000 0%, #fe0000 100%), linear-gradient(to right, #fe0000 0%, #fe0000 50%, #ffa500 50%, #ffa500 100%), linear-gradient(to right, #ffa500 0%, #ffa500 100%), linear-gradient(to right, #ffa500 0%, #ffa500 50%, #ffff00 50%, #ffff00 100%), linear-gradient(to right, #ffff00 0%, #ffff00 100%), linear-gradient(to right, #ffff00 0%, #ffff00 50%, #00fb00 50%, #00fb00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 100%), linear-gradient(to right, #00fb00 0%, #00fb00 50%, #009eff 50%, #009eff 100%), linear-gradient(to right, #009eff 0%, #009eff 100%), linear-gradient(to right, #009eff 0%, #009eff 50%, #6531ff 50%, #6531ff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 100%), linear-gradient(to right, #6531ff 0%, #6531ff 50%, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0) 100%);


      .feet 
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 25px, rgba(0, 0, 0, 0) 25px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 110px, rgba(0, 0, 0, 0) 110px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px, #000000 35px, #9d9d9d 35px, #9d9d9d 40px, #000000 40px, #000000 80px, #9d9d9d 80px, #9d9d9d 110px, #000000 110px, #000000 115px, rgba(0, 0, 0, 0) 115px, rgba(0, 0, 0, 0) 120px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px, #000000 20px, rgba(0, 0, 0, 0) 20px, rgba(0, 0, 0, 0) 25px, #000000 25px, #000000 30px, #9d9d9d 30px, #9d9d9d 40px, #000000 40px, #000000 45px, rgba(0, 0, 0, 0) 45px, rgba(0, 0, 0, 0) 75px, #000000 75px, #000000 80px, #9d9d9d 80px, #9d9d9d 90px, #000000 90px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 100px, #000000 100px, #000000 105px, #9d9d9d 105px, #9d9d9d 115px, #000000 115px, #000000 120px), linear-gradient(to right, #000000 0%, #000000 15px, rgba(0, 0, 0, 0) 15px, rgba(0, 0, 0, 0) 30px, #000000 30px, #000000 45px, rgba(0, 0, 0, 0) 45px, rgba(0, 0, 0, 0) 80px, #000000 80px, #000000 95px, rgba(0, 0, 0, 0) 95px, rgba(0, 0, 0, 0) 105px, #000000 105px, #000000 120px);


      .tail > span 
        background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 15px, rgba(0, 0, 0, 0) 15px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px, #000000 20px, rgba(0, 0, 0, 0) 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 20px, rgba(0, 0, 0, 0) 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, #000000 0%, #000000 10px, #9d9d9d 10px, #9d9d9d 25px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #000000 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 15px, #000000 15px, #000000 20px, #9d9d9d 20px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10px, #000000 10px, #000000 15px, #9d9d9d 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 10px, #9d9d9d 10px, #9d9d9d 20px, #000000 20px), linear-gradient(to right, #000000 0%, #000000 5px, #9d9d9d 5px, #9d9d9d 15px, #000000 15px), linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 5px, #000000 5px, #000000 15px, rgba(0, 0, 0, 0) 15px);

    @-webkit-keyframes rainbow {
      0% {
        top: 0;
      }
      50% {
        top: 0;
      }
      100% {
        top: -65px;
      }
    }

    @keyframes rainbow {
      0% {
        top: 0;
      }
      50% {
        top: 0;
      }
      100% {
        top: -65px;
      }
    }
    @-webkit-keyframes nyan {
      0% {
        margin-top: -50px;
      }
      10% {
        margin-top: -50px;
      }
      80% {
        margin-top: -53px;
      }
      100% {
        margin-top: -50px;
      }
    }
    @keyframes nyan {
      0% {
        margin-top: -50px;
      }
      10% {
        margin-top: -50px;
      }
      80% {
        margin-top: -53px;
      }
      100% {
        margin-top: -50px;
      }
    }
    @-webkit-keyframes feet {
      0% {
        left: 20px;
      }
      100% {
        left: 30px;
      }
    }
    @keyframes feet {
      0% {
        left: 20px;
      }
      100% {
        left: 30px;
      }
    }
    @-webkit-keyframes head {
      0% {
        top: 25px;
        left: 85px;
      }
      24.99% {
        top: 25px;
        left: 85px;
      }
      25% {
        top: 22px;
        left: 88px;
      }
      49.99% {
        top: 22px;
        left: 88px;
      }
      50% {
        top: 22px;
        left: 85px;
      }
      74.99% {
        top: 22px;
        left: 85px;
      }
      75% {
        top: 22px;
        left: 82px;
      }
      99.99% {
        top: 22px;
        left: 82px;
      }
      100% {
        top: 25px;
        left: 85px;
      }
    }
    @keyframes head {
      0% {
        top: 25px;
        left: 85px;
      }
      24.99% {
        top: 25px;
        left: 85px;
      }
      25% {
        top: 22px;
        left: 88px;
      }
      49.99% {
        top: 22px;
        left: 88px;
      }
      50% {
        top: 22px;
        left: 85px;
      }
      74.99% {
        top: 22px;
        left: 85px;
      }
      75% {
        top: 22px;
        left: 82px;
      }
      99.99% {
        top: 22px;
        left: 82px;
      }
      100% {
        top: 25px;
        left: 85px;
      }
    }
    @-webkit-keyframes tail {
      0% {
        top: 0;
      }
      25% {
        top: 0;
      }
      49.99% {
        top: 0;
      }
      50% {
        top: -30px;
      }
      74.99% {
        top: -30px;
      }
      75% {
        top: -60px;
      }
      99.99% {
        top: -60px;
      }
      100% {
        top: -90px;
      }
    }
    @keyframes tail {
      0% {
        top: 0;
      }
      25% {
        top: 0;
      }
      49.99% {
        top: 0;
      }
      50% {
        top: -30px;
      }
      74.99% {
        top: -30px;
      }
      75% {
        top: -60px;
      }
      99.99% {
        top: -60px;
      }
      100% {
        top: -90px;
      }
    }
    @keyframes woosh {
      0% {
        left: 0px;
      }
      100% {
        left: -400px;
      }
    }
    @keyframes sparkly {
      0% {
        background-size: 400px 6px, 0 0, 0 0, 0 0;
        background-position: 17px 17px, 0 0, 0 0, 0 0;
      }
      16% {
        background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px;
        background-position: 17px 0, 34px 17px, 17px 34px, 0 17px;
      }
      33% {
        background-size: 400px 6px, 400px 6px, 400px 6px, 400px 6px;
        background-position: 17px 0, 34px 17px, 17px 34px, 0 17px;
      }
      50% {
        background-size: 400px 6px, 0 0, 0 0, 0 0;
        background-position: 17px 17px, 0 0, 0 0, 0 0;
      }
      66% {
        background-size: 400px 11px, 400px 11px, 0 0, 0 0;
        background-position: 17px 6px, 17px 23px, 0 0, 0 0;
      }
      83% {
        background-size: 0 0, 0 0, 400px 5px, 400px 5px;
        background-position: 0 0, 0 0, 11px 17px, 22px 17px;
      }
      100% {
        background-size: 400px 6px, 0 0, 0 0, 0 0;
        background-position: 17px 17px, 0 0, 0 0, 0 0;
      }
    }
    @keyframes sparkly-before {
      0% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
      16% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
      33% {
        background-size: 400px 5px, 400px 5px, 400px 5px, 400px 5px;
        background-position: 6px 6px, 29px 6px, 29px 29px, 6px 29px;
      }
      50% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
      66% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
      83% {
        background-size: 0 0, 0 0, 400px 5px, 400px 5px;
        background-position: 0 0, 0 0, 17px 12px, 17px 22px;
      }
      100% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
    }
    @keyframes sparkly-after {
      0% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
      16% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
      33% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
      50% {
        background-size: 400px 11px, 400px 11px, 400px 6px, 400px 6px;
        background-position: 17px 0, 17px 29px, 0 17px, 29px 17px;
      }
      66% {
        background-size: 0 0, 0 0, 400px 6px, 400px 6px;
        background-position: 0 0, 0 0, 6px 17px, 23px 17px;
      }
      83% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
      100% {
        background-size: 0 0, 0 0, 0 0, 0 0;
        background-position: 0 0, 0 0, 0 0, 0 0;
      }
    }

  2. 修改[Blogroot]\themes\butterfly\layout\includes\loading\fullpage-loading.pug，复制以下代码替换全部内容。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
#loading-box(onclick='document.getElementById("loading-box").classList.add("loaded")')
    .sparks-combo
        .spark
        .spark
        .spark
        .spark
    .rainbow
        span
    .nyan-cat
        .feet
        .tail
            span
        .body
        .head
    script(src="/js/nyan.js")

更新于：

站点折腾

加载动画