前言

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

魔改步骤

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

  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 效果,具体的引入步骤和教程基本一样!