Hexo + Butterfly 更换加载动画

参考文章：https://blog.zhheo.com/p/32776e99.html

资源文件

配置

在主题配置文件_config.butterfly.yml中，找到preloader并设置enable为true

在 \themes\butterfly\source\css目录下新建 loading_car.css文件，添加：

   1/* loading背景 */
   2.loading-bg, #loading-box .loading-left-bg, #loading-box .loading-right-bg{
   3    background-color: #3f3f3f;
   4}
   5
   6.carplay{
   7    box-sizing: border-box;
   8
   9    --black :#1a1c20 ;
  10    --white : #fff ;
  11    --green : #3f3f3f ;
  12    --d-green : #1e1e1e ;
  13    --gray : #c1c1c1 ;
  14    --l-gray: #c4c4c4 ;
  15    --m-gray : #373838 ;
  16    --d-gray : #282724 ;
  17    --d-blue: #202428 ;
  18    --orange : #ef6206 ; 
  19    --yellow : #dfa500 ;
  20    --l-yellow: #deb953;
  21    --light: #fbfbfb ;
  22    --n-road : -4em;
  23    --p-road : 7em;
  24
  25    /* background-color: var(--green) ; */
  26
  27
  28}
  29
  30.carplay *,
  31.carplay *::before,
  32.carplay *::after{
  33
  34    box-sizing: inherit ;
  35
  36}
  37
  38.carplay::before,
  39.carplay::after {
  40
  41    content: " " ;
  42    position: absolute ;
  43    z-index: 1002;
  44}
  45
  46.carplay{
  47
  48    margin: 0 ;
  49    height: 100vh ;
  50    display: flex ;
  51    overflow: hidden ;
  52    position: relative ;
  53    align-items: center ;
  54    justify-content: center ;
  55    background-repeat: no-repeat ;
  56    animation: car 3.5s cubic-bezier(0.57, 0.63, 0.49, 0.65) infinite ;
  57
  58
  59    background-image : 
  60
  61
  62    /* ===rubber-l */ 
  63
  64        radial-gradient(circle at 49% 117%, var(--black) 37%, transparent 38%) ,
  65        radial-gradient(circle at -24% 50%, var(--white) 31%, transparent 49%) ,
  66        radial-gradient(2.95em 2.5em at 52% 1.2%, var(--black) 37%, transparent 38%) ,
  67        radial-gradient(2.95em 2.5em at 52% 1.2%, var(--black) 37%, transparent 38%) ,
  68        linear-gradient(var(--black) 100%, transparent 0) ,
  69
  70    /* rubber-l=== */ 
  71
  72
  73    /* ===rubber-r */ 
  74
  75        radial-gradient(circle at 49% 117%, var(--black) 37%, transparent 38%) ,
  76        radial-gradient(circle at 124% 50%, var(--white) 31%, transparent 49%) ,
  77        radial-gradient(2.95em 2.5em at 48% 1.2%, var(--black) 37%, transparent 38%) ,
  78        radial-gradient(2.95em 2.5em at 48% 1.2%, var(--black) 37%, transparent 38%) ,
  79        linear-gradient(var(--black) 100%, transparent 0) ,
  80
  81    /* rubber-r=== */ 
  82
  83
  84    /* ===shadow */ 
  85
  86        linear-gradient( var(--d-green) 100% , transparent 0) ;
  87
  88    /* shadow=== */
  89
  90
  91    background-size : 
  92
  93
  94    /* ===rubber-l */ 
  95
  96        2.5em 2.5em ,
  97        0.7em 0.6em ,
  98        2.5em .9em ,
  99        2.5em .9em ,
 100        1.95em 3.9em ,
 101
 102    /* rubber-l=== */
 103
 104
 105    /* ===rubber-r */ 
 106
 107        2.5em 2.5em ,
 108        0.7em 0.6em ,
 109        2.5em .9em ,
 110        2.5em .9em ,
 111        1.95em 3.9em ,
 112
 113    /* rubber-r=== */ 
 114
 115
 116    /* ===shadow */ 
 117
 118        13em .9em ;
 119
 120    /* shadow=== */
 121
 122
 123    background-position : 
 124
 125
 126    /* ===rubber-l */ 
 127
 128        calc(50% - 6.4em) calc(50% - 1.7em) ,
 129        calc(50% - 5.26em) calc(50% - -3.4em) ,
 130        calc(50% - 6.5em) calc(50% - -3.8em) ,
 131        calc(50% - 4.3em) calc(50% - -3.2em) ,
 132        calc(50% - 6.58em) calc(50% - -1.5em) ,
 133
 134    /* rubber-l=== */ 
 135
 136
 137    /* ===rubber-r */ 
 138
 139        calc(50% - -6.45em) calc(50% - 1.7em) ,
 140        calc(50% - -5.26em) calc(50% - -3.4em) ,
 141        calc(50% - -6.5em) calc(50% - -3.8em) ,
 142        calc(50% - -4.3em) calc(50% - -3.2em) ,
 143        calc(50% - -6.58em) calc(50% - -1.5em) ,
 144
 145    /* rubber-r=== */ 
 146
 147
 148    /* ===shadow */ 
 149
 150        center calc(50% - -3.8em) ;
 151
 152    /* shadow=== */
 153
 154
 155}
 156
 157
 158
 159.carplay::before{
 160
 161    width: 15.5em ;
 162    height: 62.9em ;
 163    top: calc(50% - 26.2em) ;
 164    background-size: 24.6% 491% ;
 165    background-repeat: no-repeat ;
 166    background-position: center 0 ;
 167    animation: line 1.5s infinite linear, move-road 3.5s infinite linear ;
 168    transform: perspective(311px) rotateX(83deg) translate3d(var(--n-road) ,-11.975em, 0) ;
 169    background-image: repeating-linear-gradient(to top, var(--white) , var(--white) 4.6%, transparent 0 , transparent 13.01%) ;
 170
 171}
 172
 173
 174
 175
 176
 177.carplay::after{
 178
 179    width: 15.2em ;
 180    height: 13.2em ;
 181    top: calc(50% - 8.8em) ;
 182    left: calc(50% - 7.55em) ;
 183    background-repeat: no-repeat ;
 184    animation: light 1s linear infinite,  shake 3.5s linear infinite ;  
 185
 186
 187
 188    background-image : 
 189
 190    /* ===ceiling */ 
 191
 192        radial-gradient(58em 20em at 50% 215% , transparent 20% , var(--white) 20.5% , var(--white) 20.8% , var(--green) 21.5%) ,
 193
 194    /* ceiling=== */
 195
 196
 197    /* ===antenna */ 
 198
 199        radial-gradient( circle at center 100% , var(--black)  30% , transparent 0) ,
 200
 201    /* antenna=== */
 202
 203
 204    /* ===antenna */ 
 205
 206        linear-gradient(var(--white) 100% , transparent 0) ,
 207
 208    /* antenna=== */
 209
 210
 211    /* ===glass-l */ 
 212
 213        radial-gradient( 17.8em 37em at 70% 240% , var(--black) 30% , transparent 30.5%) ,
 214
 215    /* glass-l=== */
 216
 217
 218    /* ===glass-r */ 
 219
 220        radial-gradient( 17.8em 37em at 31% 240% , var(--black) 30% , transparent 30.5%) ,
 221
 222    /* glass-r=== */
 223
 224
 225    /* ===light */ 
 226
 227        radial-gradient( circle , var(--light) 48% ,  var(--black) 52%, var(--black) 59% , transparent 62%) ,
 228
 229    /* light=== */
 230
 231
 232    /* ===light */ 
 233
 234        radial-gradient( circle , var(--light) 48% ,  var(--black) 52%, var(--black) 59% , transparent 62%) ,
 235
 236    /* light=== */
 237
 238
 239    /* ===hood-ro */ 
 240
 241        radial-gradient( 1em 1em at 102% 100% ,   var(--m-gray)  28%, #f3f3f3 30% ) ,
 242
 243    /* hood-ro=== */
 244
 245
 246    /* ===hood-ro */ 
 247
 248        radial-gradient( 1em 1em at 97% -7% ,  var(--m-gray)  28%, var(--l-gray)  30% ) ,
 249
 250    /* hood-ro=== */
 251
 252
 253    /* ===hood-ro */ 
 254
 255        radial-gradient( 1em 1em at -6% 102% ,  var(--m-gray)  28%, #efefef 30% ) ,
 256
 257    /* hood-ro=== */
 258
 259
 260    /* ===hood-ro */ 
 261
 262        radial-gradient( 1em 1em at -6% -1% ,  var(--m-gray)  28%, var(--l-gray)  30% ) ,
 263
 264    /* hood-ro=== */
 265
 266
 267    /* ===hood-f */ 
 268
 269        linear-gradient( to top , var(--m-gray) 50% ,  var(--d-gray) 0, var(--d-gray) 58% , var(--m-gray) 0) ,
 270
 271    /* hood-f=== */
 272
 273
 274    /* ===hood-e */ 
 275
 276        linear-gradient( to top , var(--l-gray) 30% , var(--white) 100% , transparent 0) ,
 277
 278    /* hood-e=== */
 279
 280
 281    /* ===hood-l */ 
 282
 283        radial-gradient( 16.4em 30.1em at 209% 333% , var(--white)  30% , transparent 30.2%) ,
 284
 285    /* hood-l=== */
 286
 287
 288    /* ===hood-r */ 
 289
 290        radial-gradient( 16.4em 30.1em at -109% 333% , var(--white) 30% , transparent 30.2%) ,
 291
 292    /* hood-r=== */
 293
 294
 295    /* ===hood-o */ 
 296
 297        linear-gradient(  var(--gray) 100% , transparent 0) ,
 298
 299    /* hood-o=== */
 300
 301
 302    /* ===hood */ 
 303
 304        linear-gradient( var(--white) 100% , transparent 0) ,
 305
 306    /* hood=== */
 307
 308
 309    /* ===mirror */ 
 310
 311        radial-gradient( 6.7em 2.5em at 154% 8% , var(--black) 30% , transparent 33%) ,
 312
 313    /* mirror=== */
 314
 315
 316    /* ===mirror */ 
 317
 318        radial-gradient( 6.7em 2.5em at -53% 8% , var(--black) 30% , transparent 33%) ,
 319
 320    /* mirror=== */
 321
 322
 323    /* ===guide-l */ 
 324
 325        linear-gradient( var(--orange) 100% , transparent 0) ,
 326
 327    /* guide-l=== */
 328
 329
 330    /* ===guide-r */ 
 331
 332        linear-gradient( var(--orange) 100% , transparent 0) ,
 333
 334    /* guide-r=== */
 335
 336
 337    /* ===plaque */ 
 338
 339        linear-gradient( var(--yellow) 100% , transparent 0) ,
 340
 341    /* plaque=== */
 342
 343
 344    /* ===plaque */ 
 345
 346        linear-gradient( var(--l-yellow) 100% , transparent 0) ,
 347
 348    /* plaque=== */
 349
 350
 351    /* ===bumper */ 
 352
 353        linear-gradient( var(--d-blue) 100% , transparent 0) ,
 354
 355    /* bumper=== */
 356
 357
 358    /* ===bumper-l */ 
 359
 360        radial-gradient( circle at 124% 39% , var(--d-blue) 60% , transparent 64%) ,
 361
 362    /* bumper-l=== */
 363
 364
 365    /* ===bumper-r */ 
 366
 367        radial-gradient( circle at -44% 39% , var(--d-blue) 60% , transparent 64%) ,
 368
 369    /* bumper-r=== */
 370
 371
 372    /* ===bumper-d */ 
 373
 374        radial-gradient(13.2em 2em at 50% 59% , var(--l-gray) 96% , transparent 100% ) ,
 375
 376    /* bumper-d=== */
 377
 378
 379    /* ===bumper-l */ 
 380
 381        radial-gradient( 1.6em 1.6em at 75% -9% , var(--l-gray) 60% , transparent 64%) ,
 382
 383    /* bumper-l=== */
 384
 385
 386    /* ===bumper-r */ 
 387
 388        radial-gradient( 1.6em 1.6em at 15% -9% , var(--l-gray) 60% , transparent 64%) ,
 389
 390    /* bumper-r=== */
 391
 392
 393    /* ===floor */ 
 394
 395        linear-gradient( var(--d-blue) 100% , transparent 0) ,
 396
 397    /* floor=== */
 398
 399
 400    /* ===floor-l */ 
 401
 402        radial-gradient( 6.9em 4.6em at 295% 3% , var(--d-blue) 30% , transparent 31%) ,
 403
 404    /* floor-l=== */
 405
 406
 407    /* ===floor-r */ 
 408
 409        radial-gradient( 6.9em 4.6em at -189% 3% , var(--d-blue) 30% , transparent 31%) ;
 410
 411    /* floor-r=== */
 412
 413
 414
 415    background-size : 
 416
 417    /*=== ceiling */ 
 418
 419        61.5% 20% ,
 420
 421    /* ceiling=== */  
 422
 423
 424    /* ===antenna */ 
 425
 426        5% 6% ,
 427
 428    /* antenna=== */
 429
 430
 431    /*=== antenna */ 
 432
 433        .4% 39% ,
 434
 435    /* antenna=== */
 436
 437
 438    /* ===glass-l */ 
 439
 440        60% 30% ,
 441
 442    /* glass-l=== */
 443
 444
 445    /* ===glass-r */ 
 446
 447        60% 30% ,
 448
 449    /* glass-r=== */
 450
 451
 452    /* ===light */ 
 453
 454        16% 16% ,
 455
 456    /* light=== */
 457
 458
 459    /* ===light */ 
 460
 461        16% 16% ,
 462
 463    /* light=== */
 464
 465
 466    /* ===hood-ro */ 
 467
 468        2.4% 2%  ,
 469
 470    /* hood-ro=== */
 471
 472
 473    /* ===hood-ro */ 
 474
 475        2.4% 2.3% ,
 476
 477    /* hood-ro=== */
 478
 479
 480    /* ===hood-ro */ 
 481
 482        2.4% 2.3% ,
 483
 484    /* hood-ro=== */
 485
 486
 487    /* ===hood-ro */ 
 488
 489        2.4% 2.3% ,
 490
 491    /* hood-ro=== */
 492
 493
 494    /* ===hood-f */ 
 495
 496        91% 12%  ,
 497
 498    /* hood-f=== */
 499
 500
 501    /* ===hood-e */ 
 502
 503        93.9% 17% ,
 504
 505    /* hood-e=== */
 506
 507
 508    /* ===hood-l */ 
 509
 510        12% 17.5% ,
 511
 512    /* hood-l=== */
 513
 514
 515    /* ===hood-r */ 
 516
 517        12% 17.5% ,
 518
 519    /* hood-r=== */
 520
 521
 522    /* ===hood-o */ 
 523
 524        38% 1.1% ,
 525
 526    /* hood-o=== */
 527
 528
 529    /* ===hood */ 
 530
 531        77% 25% ,
 532
 533    /* hood=== */
 534
 535
 536    /* ===mirror */ 
 537
 538        9% 30% ,
 539
 540    /* mirror=== */
 541
 542
 543    /* ===mirror */ 
 544
 545        9% 30% ,
 546
 547    /* mirror=== */
 548
 549
 550    /* ===guide-l */ 
 551
 552        8.4% 3% ,
 553
 554    /* guide-l=== */
 555
 556
 557    /* ===guide-r */ 
 558
 559        8.4% 3% ,
 560
 561    /* guide-r=== */
 562
 563
 564    /* ===plaque */ 
 565
 566        33% 6.5% ,
 567
 568    /* plaque=== */
 569
 570
 571    /* ===plaque */ 
 572
 573        36% 9% ,
 574
 575    /* plaque=== */
 576
 577
 578    /* ===bumper */ 
 579
 580        87% 30% ,
 581
 582    /* bumper=== */
 583
 584
 585    /* ===bumper-l */ 
 586
 587        10% 12% ,
 588
 589    /* bumper-l=== */
 590
 591
 592    /* ===bumper-r */ 
 593
 594        10% 12% ,
 595
 596    /* bumper-r=== */
 597
 598
 599    /* ===bumper-d */ 
 600
 601        78% 35% ,
 602
 603    /* bumper-d=== */
 604
 605
 606    /* ===bumper-l */ 
 607
 608        11% 8% ,
 609
 610    /* bumper-l=== */
 611
 612
 613    /* ===bumper-r */ 
 614
 615        11% 8% ,
 616
 617    /* bumper-r=== */
 618
 619
 620    /* ===floor */ 
 621
 622        68%  8% ,
 623
 624    /* floor=== */
 625
 626
 627    /* ===floor-l */ 
 628
 629        5% 7% ,
 630
 631    /* floor-l=== */
 632
 633
 634    /* ===floor-r */ 
 635
 636        5% 7% ;
 637
 638    /* floor-r=== */
 639
 640
 641    background-position : 
 642
 643
 644    /*=== ceiling */ 
 645
 646        50.5% 0 ,
 647
 648    /* ceiling=== */ 
 649
 650
 651    /* ===antenna */ 
 652
 653        90% 37% ,
 654
 655    /* antenna=== */
 656
 657
 658    /*=== antenna */ 
 659
 660        88% 1.2% ,
 661
 662    /* antenna=== */ 
 663
 664
 665    /* ===glass-l */ 
 666
 667        0 11.7% ,
 668
 669    /* glass-l=== */
 670
 671
 672    /* ===glass-r */ 
 673
 674        100% 11.7% ,
 675
 676    /* glass-r=== */   
 677
 678
 679    /* ===light */ 
 680
 681        5% 63% ,
 682
 683    /* light=== */ 
 684
 685
 686    /* ===light */ 
 687
 688        95% 63% ,
 689
 690    /* light=== */ 
 691
 692
 693    /* ===hood-ro */ 
 694
 695        4.1% 55.7% ,
 696
 697    /* hood-ro=== */ 
 698
 699
 700    /* ===hood-ro */ 
 701
 702        4.1% 65.9% ,
 703
 704    /* hood-ro=== */ 
 705
 706
 707    /* ===hood-ro */ 
 708
 709        95.8% 55.7% ,
 710
 711    /* hood-ro=== */ 
 712
 713
 714    /* ===hood-ro */ 
 715
 716        95.8% 65.8% ,
 717
 718    /* hood-ro=== */ 
 719
 720
 721    /* ===hood-f */ 
 722
 723        center 62% ,
 724
 725    /* hood-f=== */ 
 726
 727
 728    /* ===hood-e */ 
 729
 730        49% 63.6% ,
 731
 732    /* hood-e=== */
 733
 734
 735
 736    /* ===hood-l */ 
 737
 738        3.4% 46.2% ,
 739
 740    /* hood-l=== */ 
 741
 742
 743    /* ===hood-r */ 
 744
 745        96.5% 46.2% ,
 746
 747    /* hood-r=== */
 748
 749
 750    /* ===hood-o */ 
 751
 752        center 40.9% ,
 753
 754    /* hood-o=== */
 755
 756
 757    /* ===hood */ 
 758
 759        center 50.3% ,
 760
 761    /* hood=== */
 762
 763
 764    /* ===mirror */ 
 765
 766        5.7% 48.6% ,
 767
 768    /* mirror=== */ 
 769
 770
 771    /* ===mirror */ 
 772
 773        95% 48.6% ,
 774
 775    /* mirror=== */
 776
 777
 778    /* ===guide-l */ 
 779
 780        5% 75.2% ,
 781
 782    /* guide-l=== */
 783
 784
 785    /* ===guide-r */ 
 786
 787        95% 75.2% ,
 788
 789    /* guide-r=== */
 790
 791
 792    /* ===plaque */ 
 793
 794        51% 86%  ,
 795
 796    /* plaque=== */
 797
 798
 799    /* ===plaque */ 
 800
 801        51.5% 87.3%  ,
 802
 803    /* plaque=== */
 804
 805
 806    /* ===bumper */ 
 807
 808        center 71.9% ,
 809
 810    /* bumper=== */
 811
 812
 813    /* ===bumper-l */ 
 814
 815        -0.8% 77.8% ,
 816
 817    /* bumper-l=== */
 818
 819
 820    /* ===bumper-r */ 
 821
 822        101.7% 77.8% ,
 823
 824    /* bumper-r=== */
 825
 826
 827    /* ===bumper-d */ 
 828
 829        center 80.2% ,
 830
 831    /* bumper-d=== */
 832
 833
 834    /* ===bumper-l */ 
 835
 836        4% 85.9% ,
 837
 838    /* bumper-l=== */
 839
 840
 841    /* ===bumper-r */ 
 842
 843        97% 85.9% ,
 844
 845    /* bumper-r=== */
 846
 847
 848    /* ===floor */ 
 849
 850        center 92.5% ,
 851
 852    /* floor=== */
 853
 854
 855    /* ===floor-l */ 
 856
 857        11.7% 92.6% ,
 858
 859    /* floor-l=== */
 860
 861
 862    /* ===floor-r */ 
 863
 864        88.3% 92.6% ;
 865
 866    /* floor-r=== */
 867
 868
 869}
 870
 871
 872@keyframes line{
 873
 874    100%{
 875
 876        background-position: center 100% ;
 877
 878    }
 879
 880} 
 881
 882
 883@keyframes car{
 884
 885    15%, 23%{
 886
 887        transform: translate3d(-2.3em, 0, 0) ;
 888
 889    }
 890
 891    36% , 42%{
 892
 893        transform: translate3d(-.8em, 0, 0) ;
 894
 895    }
 896
 897    61%, 71.5%{
 898
 899        transform: translate3d(2.8em, 0, 0) ;
 900
 901    }
 902
 903    81%, 88%{
 904
 905        transform: translate3d(1.5em, 0, 0) ;
 906    }
 907
 908}
 909
 910@keyframes move-road {
 911
 912    5.5%{
 913
 914        transform: perspective(311px) rotateX(83deg) translate3d(var(--n-road) ,-11.975em, 0) ;
 915
 916    }
 917
 918    27%, 51%{
 919
 920        transform: perspective(311px) rotateX(83deg) translate3d(var(--p-road) ,-11.975em, 0) ;
 921
 922    }
 923
 924    73%, 100% {
 925
 926        transform: perspective(311px) rotateX(83deg) translate3d(var(--n-road) ,-11.975em, 0) ;
 927
 928
 929    }
 930
 931}
 932
 933@keyframes light{
 934
 935    0% , 37%{
 936
 937        --light: #fbfbfb ;
 938    }
 939
 940    50%{
 941
 942        --light : #f1f1f1 ;
 943    }
 944
 945    62%{
 946
 947        --light : #fbfbfb ;
 948    }
 949
 950    65%{
 951
 952        --light: #f1f1f1 ;
 953
 954    }
 955
 956    95%{
 957
 958        --light: #fbfbfb ;
 959
 960    }
 961
 962    100%{
 963
 964         --light: #f1f1f1 ;
 965
 966    }
 967
 968}
 969
 970@keyframes shake {
 971
 972    5%, 26%{
 973
 974        transform:  rotate(-1.5deg) ;
 975
 976    }
 977
 978    33%, 41%{
 979
 980        transform:  rotate(-.5deg) ;
 981
 982    }
 983
 984    48%, 69%{
 985
 986        transform: rotate(1.5deg) ;
 987
 988    }
 989
 990    80%, 95%{
 991
 992        transform:  rotate(.5deg) ;
 993
 994    }
 995
 996}
 997
 998/* 
 999@media screen and (max-width: 36em) {
1000
1001    html{
1002
1003        transform: scale(.5) ;
1004
1005    }
1006
1007
1008    .carplay::before{
1009
1010        width: 11em ;
1011        --n-road: -4em ;
1012        --p-road: 4em ;
1013
1014    }
1015
1016
1017}
1018
1019 */

在主题配置文件 _config.butterfly.yml的 inject，在 head直接引入 css文件
```
1- <link rel="stylesheet" href="/css/loading_car.css">
```

打开\themes\butterfly\layout\includes\loading\fullpage-loading.pug文件，修改成：

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