前言

Butterfly 主题自带的 Loading 效果晒微显得单调，在参考了 Akilar の糖果屋 等大佬的教程后，决定亲自添加一款比较自然的加载动画

魔改步骤

  1. 在配置本帖的魔改内容之前，请确保您已经完成了 Akilar の糖果屋 大佬的前置教程，即基于 Butterfly 的加载动画修改：

    Loading Animation

    https://akilar.top/posts/3d221bf2/

  2. 完成后，在此基础上，继续新增加载动画，新建 [Blogroot]\themes\butterfly\layout\includes\loading\load_style\gooey.pug

    1
    2
    3
    4
    #loading-box
      div.centered
        div.blob-1
        div.blob-2

  3. 新建 [Blogroot]\themes\butterfly\source\css\_load_style\gooey.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
    #loading-box {
        background: #000;
        position: fixed;
        z-index: 1000;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        text-align: center;

        &.loaded {
            z-index: -1000;
        }

        .centered {
            width: 400px;
            height: 400px;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #000;
            filter: blur(10px) contrast(20);

            .blob-1, .blob-2 {
                width: 70px;
                height: 70px;
                position: absolute;
                background: #fff;
                border-radius: 50%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .blob-1 {
                left: 20%;
                animation: osc-l 2.5s ease infinite;
            }

            .blob-2 {
                left: 80%;
                animation: osc-r 2.5s ease infinite;
                background: #0ff;
            }
        }
    }

    /* Animations */
    @keyframes osc-l {
        0% {
            left: 20%;
        }

        50% {
            left: 50%;
        }

        100% {
            left: 20%;
        }
    }

    @keyframes osc-r {
        0% {
            left: 80%;
        }

        50% {
            left: 50%;
        }

        100% {
            left: 80%;
        }
    }

  4. 修改 [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
    19
    20
    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 'linkstart'
          include ./load_style/linkstart.pug
    +    when 'gooey'
    +      include ./load_style/gooey.pug
        default
          include ./load_style/default.pug

  5. 修改 [Blogroot]\_config.butterfly.yml 中的加载动画配置项

    1
    2
    3
    4
    5
    6
    # Loading Animation (加載動畫)
    preloader:
      enable: true
      load_style: gooey # default|gear|ironheart|linkstart|pokeball|scarecrow|triangles|wizard|image|gooey
      load_image: # url
      load_color: 'radial-gradient(#353c44, #222931)' # '#abcdef'

  6. 最后执行 Hexo 命令三连，hexo c,hexo g,hexo s，即可看到效果

伙伴们也可以在网上找或者自己制作自己喜欢的 Loading 效果，具体的引入步骤和教程基本一样！