背景整体修改

注意

现在是2023-09-14，本文章写于2021年，使用butterfly作为博客主题的时候，部分书写可能有些错误，请注意结合自己的实际情况。

整体修改

图片背景
渐变背景

背景使用图片，添加css

/*背景，使用图片*/
#web_bg {
  /* background: linear-gradient(90deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1)) */
  background: url(/img/web_bg.png)!important;
  /*重新定义background会导致原有定位属性失效，所以也需要再声明一次加权的定位属性*/
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

如果背景不使用图片，使用渐变，则修改为：

#recent-posts>.recent-post-item,.layout_page>div:first-child:not(.recent-posts),.layout_post>#page,.layout_post>#post,.read-mode .layout_post>#post {
    background: var(--light_bg_color)
}

#aside-content .card-widget {
    background: var(--light_bg_color)
}

#web_bg {
    background: linear-gradient(90deg,rgba(247,149,51,.1),rgba(243,112,85,.1) 15%,rgba(239,78,123,.1) 30%,rgba(161,102,171,.1) 44%,rgba(80,115,184,.1) 58%,rgba(16,152,173,.1) 72%,rgba(7,179,155,.1) 86%,rgba(109,186,130,.1))
}

文章透明度修改

/*文章页透明度*/
#content-inner {
    --light_bg_color: rgb(255,255,255 ,90%); /*侧边栏页面*/
    --dark_bg_color: rgba(18, 18, 18, 0.8);
    --light_page_color: rgb(255,255,255 ,90%);  /*文章页面*/
    --dark_page_color: rgba(18, 18, 18, 0.8);
}

顶部图

/*顶部图透明*/
#page-header{
  background: transparent!important;
}

/*顶部图遮罩*/
#page-header.post-bg:before {
  background-color: rgba(0, 0, 0, 0.4)!important;
}

页脚透明

/*页脚透明*/
#footer{
  background: transparent !important;
}

/* 页脚遮罩透明 */
#footer::before {
    background: rgba(255, 255, 255, 0);
}


/*夜间模式伪类遮罩层透明*/
[data-theme="dark"]
  #footer::before{
      background: transparent!important;
    }
[data-theme="dark"]
  #page-header::before{
    background: transparent!important;
    /* color: #d4ddeb, #79b8ff, #79b8ff; */
    }

加载动画

Akilar-糖果屋

步骤

修改 [Blogroot]\themes\butterfly\layout\includes\loading\loading.pug，直接复制以下代码替换所有原代码。

if theme.preloader.enable
  #loading-box
    .loading-left-bg
    .loading-right-bg
    case theme.preloader.load_style
      when 'wizard'
        .wizard-scene
          .wizard-objects
            .wizard-square
            .wizard-circle
            .wizard-triangle
          .wizard
            .wizard-body
            .wizard-right-arm
              .wizard-right-hand
            .wizard-left-arm
              .wizard-left-hand
            .wizard-head
              .wizard-beard
              .wizard-face
                .wizard-adds
              .wizard-hat
                .wizard-hat-of-the-hat
                .wizard-four-point-star.--first
                .wizard-four-point-star.--second
                .wizard-four-point-star.--third
      when 'ironheart'
        .iron-container.iron-circle
          .iron-box1.iron-circle.iron-center
          .iron-box2.iron-circle.iron-center
          .iron-box3.iron-circle.iron-center
          .iron-box4.iron-circle.iron-center
          .iron-box5.iron-circle.iron-center
          .iron-box6.iron-circle
            .iron-coil(style='--i: 0')
            .iron-coil(style='--i: 1')
            .iron-coil(style='--i: 2')
            .iron-coil(style='--i: 3')
            .iron-coil(style='--i: 4')
            .iron-coil(style='--i: 5')
            .iron-coil(style='--i: 6')
            .iron-coil(style='--i: 7')
      when 'scarecrow'
        .scarecrow
          .scarecrow__hat
            .scarecrow__ribbon
          .scarecrow__head
            .scarecrow__eye
            .scarecrow__eye
            .scarecrow__mouth
            .scarecrow__pipe
          .scarecrow__body
            .scarecrow__glove.scarecrow__glove--l
            .scarecrow__sleeve.scarecrow__sleeve--l
            .scarecrow__bow
            .scarecrow__shirt
            .scarecrow__coat
            .scarecrow__waistcoat
            .scarecrow__sleeve.scarecrow__sleeve--r
            .scarecrow__glove.scarecrow__glove--r
            .scarecrow__coattails
            .scarecrow__pants
          .scarecrow__arms
          .scarecrow__leg   
      when 'image'
        - var loadimage = theme.preloader.load_image ? theme.preloader.load_image : theme.error_img.post_page
        img.load-image(src=url_for(loadimage) alt='')
      default
        .spinner-box
          .configure-border-1
            .configure-core
          .configure-border-2
            .configure-core
          .loading-word= _p('loading')

修改 [Blogroot]\themes\butterfly\source\css\_layout\loading.styl，复制以下代码替换全部内容。

if hexo-config('preloader.enable')
  .loading-bg
    position fixed
    z-index 1000
    width 50%
    height 100%
    background var(--preloader-bg)
  #loading-box
    .loading-left-bg
      @extend .loading-bg
      left 0
    .loading-right-bg
      @extend .loading-bg
      right 0
    &.loaded
      z-index -1000
      .loading-left-bg
        transition all 1.0s
        transform translate(-100%, 0)
      .loading-right-bg
        transition all 1.0s
        transform translate(100%, 0)

  if hexo-config('preloader.load_style') == 'wizard'
    #loading-box
      position fixed
      z-index 1000
      display -webkit-box
      display flex
      -webkit-box-align center
      align-items center
      -webkit-box-pack center
      justify-content center
      -webkit-box-orient vertical
      -webkit-box-direction normal
      flex-direction column
      flex-wrap wrap
      width 100vw
      height 100vh
      overflow hidden

      &.loaded
        .wizard-scene
          display none

    .wizard-scene
      position fixed
      z-index 1001
      display -webkit-box
      display flex

    .wizard
      position relative
      width 190px
      height 240px

    .wizard-body
      position absolute
      bottom 0
      left 68px
      height 100px
      width 60px
      background #3f64ce
      &::after
        content ""
        position absolute
        bottom 0
        left 20px
        height 100px
        width 60px
        background #3f64ce
        -webkit-transform skewX(14deg)
        transform skewX(14deg)

    .wizard-right-arm
      position absolute
      bottom 74px
      left 110px
      height 44px
      width 90px
      background #3f64ce
      border-radius 22px
      -webkit-transform-origin 16px 22px
      transform-origin 16px 22px
      -webkit-transform rotate(70deg)
      transform rotate(70deg)
      -webkit-animation right_arm 10s ease-in-out infinite
      animation right_arm 10s ease-in-out infinite
      .right-hand
        position absolute
        right 8px
        bottom 8px
        width 30px
        height 30px
        border-radius 50%
        background #f1c5b4
        -webkit-transform-origin center center
        transform-origin center center
        -webkit-transform rotate(-40deg)
        transform rotate(-40deg)
        -webkit-animation right_hand 10s ease-in-out infinite
        animation right_hand 10s ease-in-out infinite
      .wizard-right-hand
        &::after
          content ""
          position absolute
          right 0px
          top -8px
          width 15px
          height 30px
          border-radius 10px
          background #f1c5b4
          -webkit-transform translateY(16px)
          transform translateY(16px)
          -webkit-animation right_finger 10s ease-in-out infinite
          animation right_finger 10s ease-in-out infinite

    .wizard-left-arm
      position absolute
      bottom 74px
      left 26px
      height 44px
      width 70px
      background #3f64ce
      border-bottom-left-radius 8px
      -webkit-transform-origin 60px 26px
      transform-origin 60px 26px
      -webkit-transform rotate(-70deg)
      transform rotate(-70deg)
      -webkit-animation left_arm 10s ease-in-out infinite
      animation left_arm 10s ease-in-out infinite
      .wizard-left-hand
        position absolute
        left -18px
        top 0
        width 18px
        height 30px
        border-top-left-radius 35px
        border-bottom-left-radius 35px
        background #f1c5b4
        &::after
          content ""
          position absolute
          right 0
          top 0
          width 30px
          height 15px
          border-radius 20px
          background #f1c5b4
          -webkit-transform-origin right bottom
          transform-origin right bottom
          -webkit-transform scaleX(0)
          transform scaleX(0)
          -webkit-animation left_finger 10s ease-in-out infinite
          animation left_finger 10s ease-in-out infinite

    .wizard-head
      position absolute
      top 0
      left 14px
      width 160px
      height 210px
      -webkit-transform-origin center center
      transform-origin center center
      -webkit-transform rotate(-3deg)
      transform rotate(-3deg)
      -webkit-animation head 10s ease-in-out infinite
      animation head 10s ease-in-out infinite
      .wizard-beard
        position absolute
        bottom 0
        left 38px
        height 106px
        width 80px
        border-bottom-right-radius 55%
        background #ffffff
        &::after
          content ""
          position absolute
          top 16px
          left -10px
          width 40px
          height 20px
          border-radius 20px
          background #ffffff
      .wizard-face
        position absolute
        bottom 76px
        left 38px
        height 30px
        width 60px
        background #f1c5b4
        &::before
          content ""
          position absolute
          top 0px
          left 40px
          width 20px
          height 40px
          border-bottom-right-radius 20px
          border-bottom-left-radius 20px
          background #f1c5b4
        &::after
          content ""
          position absolute
          top 16px
          left -10px
          width 50px
          height 20px
          border-radius 20px
          border-bottom-right-radius 0px
          background #ffffff
        .wizard-adds
          position absolute
          top 0px
          left -10px
          width 40px
          height 20px
          border-radius 20px
          background #f1c5b4
          &::after
            content ""
            position absolute
            top 5px
            left 80px
            width 15px
            height 20px
            border-bottom-right-radius 20px
            border-top-right-radius 20px
            background #f1c5b4
      .wizard-hat
        position absolute
        bottom 106px
        left 0
        width 160px
        height 20px
        border-radius 20px
        background #3f64ce
        &::before
          content ""
          position absolute
          top -70px
          left 50%
          -webkit-transform translatex(-50%)
          transform translatex(-50%)
          width 0
          height 0
          border-style solid
          border-width 0 34px 70px 50px
          border-color transparent transparent #3f64ce transparent
        &::after
          content ""
          position absolute
          top 0
          left 0
          width 160px
          height 20px
          background #3f64ce
          border-radius 20px
        .wizard-hat-of-the-hat
          position absolute
          bottom 78px
          left 79px
          width 0
          height 0
          border-style solid
          border-width 0 25px 25px 19px
          border-color transparent transparent #3f64ce transparent
          &::after
            content ""
            position absolute
            top 6px
            left -4px
            width 35px
            height 10px
            border-radius 10px
            border-bottom-left-radius 0px
            background #3f64ce
            -webkit-transform rotate(40deg)
            transform rotate(40deg)
        .wizard-four-point-star
          position absolute
          width 12px
          height 12px
          &::after
            -webkit-transform rotate(156.66deg) skew(45deg)
            transform rotate(156.66deg) skew(45deg)
          &.--first
            bottom 28px
            left 46px
          &.--second
            bottom 40px
            left 80px
          &.--third
            bottom 15px
            left 108px

    .wizard-head .wizard-hat .wizard-four-point-star::after, .wizard-head .wizard-hat .wizard-four-point-star::before
      content ""
      position absolute
      background #ffffff
      display block
      left 0
      width 141.4213%
      top 0
      bottom 0
      border-radius 10%
      -webkit-transform rotate(66.66deg) skewX(45deg)
      transform rotate(66.66deg) skewX(45deg)

    .wizard-objects
      position relative
      width 200px
      height 240px

    .wizard-square
      position absolute
      bottom -60px
      left -5px
      width 120px
      height 120px
      border-radius 50%
      -webkit-transform rotate(-360deg)
      transform rotate(-360deg)
      -webkit-animation path_square 10s ease-in-out infinite
      animation path_square 10s ease-in-out infinite
      &::after
        content ""
        position absolute
        top 10px
        left 0
        width 50px
        height 50px
        background #9ab3f5

    .wizard-circle
      position absolute
      bottom 10px
      left 0
      width 100px
      height 100px
      border-radius 50%
      -webkit-transform rotate(-360deg)
      transform rotate(-360deg)
      -webkit-animation path_circle 10s ease-in-out infinite
      animation path_circle 10s ease-in-out infinite
      &::after
        content ""
        position absolute
        bottom -10px
        left 25px
        width 50px
        height 50px
        border-radius 50%
        background #c56183

    .wizard-triangle
      position absolute
      bottom -62px
      left -10px
      width 110px
      height 110px
      border-radius 50%
      -webkit-transform rotate(-360deg)
      transform rotate(-360deg)
      -webkit-animation path_triangle 10s ease-in-out infinite
      animation path_triangle 10s ease-in-out infinite
      &::after
        content ""
        position absolute
        top 0
        right -10px
        width 0
        height 0
        border-style solid
        border-width 0 28px 48px 28px
        border-color transparent transparent #89beb3 transparent


    /** 10s animation - 10% = 1s */
    @-webkit-keyframes right_arm
      0%
        -webkit-transform rotate(70deg)
        transform rotate(70deg)
      10%
        -webkit-transform rotate(8deg)
        transform rotate(8deg)
      15%
        -webkit-transform rotate(20deg)
        transform rotate(20deg)
      20%
        -webkit-transform rotate(10deg)
        transform rotate(10deg)
      25%
        -webkit-transform rotate(26deg)
        transform rotate(26deg)
      30%
        -webkit-transform rotate(10deg)
        transform rotate(10deg)
      35%
        -webkit-transform rotate(28deg)
        transform rotate(28deg)
      40%
        -webkit-transform rotate(9deg)
        transform rotate(9deg)
      45%
        -webkit-transform rotate(28deg)
        transform rotate(28deg)
      50%
        -webkit-transform rotate(8deg)
        transform rotate(8deg)
      58%
        -webkit-transform rotate(74deg)
        transform rotate(74deg)
      62%
        -webkit-transform rotate(70deg)
        transform rotate(70deg)

    @keyframes right_arm
      0%
        -webkit-transform rotate(70deg)
        transform rotate(70deg)
      10%
        -webkit-transform rotate(8deg)
        transform rotate(8deg)
      15%
        -webkit-transform rotate(20deg)
        transform rotate(20deg)
      20%
        -webkit-transform rotate(10deg)
        transform rotate(10deg)
      25%
        -webkit-transform rotate(26deg)
        transform rotate(26deg)
      30%
        -webkit-transform rotate(10deg)
        transform rotate(10deg)
      35%
        -webkit-transform rotate(28deg)
        transform rotate(28deg)
      40%
        -webkit-transform rotate(9deg)
        transform rotate(9deg)
      45%
        -webkit-transform rotate(28deg)
        transform rotate(28deg)
      50%
        -webkit-transform rotate(8deg)
        transform rotate(8deg)
      58%
        -webkit-transform rotate(74deg)
        transform rotate(74deg)
      62%
        -webkit-transform rotate(70deg)
        transform rotate(70deg)

    @-webkit-keyframes left_arm
      0%
        -webkit-transform rotate(-70deg)
        transform rotate(-70deg)
      10%
        -webkit-transform rotate(6deg)
        transform rotate(6deg)
      15%
        -webkit-transform rotate(-18deg)
        transform rotate(-18deg)
      20%
        -webkit-transform rotate(5deg)
        transform rotate(5deg)
      25%
        -webkit-transform rotate(-18deg)
        transform rotate(-18deg)
      30%
        -webkit-transform rotate(5deg)
        transform rotate(5deg)
      35%
        -webkit-transform rotate(-17deg)
        transform rotate(-17deg)
      40%
        -webkit-transform rotate(5deg)
        transform rotate(5deg)
      45%
        -webkit-transform rotate(-18deg)
        transform rotate(-18deg)
      50%
        -webkit-transform rotate(6deg)
        transform rotate(6deg)
      58%
        -webkit-transform rotate(-74deg)
        transform rotate(-74deg)
      62%
        -webkit-transform rotate(-70deg)
        transform rotate(-70deg)

    @keyframes left_arm
      0%
        -webkit-transform rotate(-70deg)
        transform rotate(-70deg)
      10%
        -webkit-transform rotate(6deg)
        transform rotate(6deg)
      15%
        -webkit-transform rotate(-18deg)
        transform rotate(-18deg)
      20%
        -webkit-transform rotate(5deg)
        transform rotate(5deg)
      25%
        -webkit-transform rotate(-18deg)
        transform rotate(-18deg)
      30%
        -webkit-transform rotate(5deg)
        transform rotate(5deg)
      35%
        -webkit-transform rotate(-17deg)
        transform rotate(-17deg)
      40%
        -webkit-transform rotate(5deg)
        transform rotate(5deg)
      45%
        -webkit-transform rotate(-18deg)
        transform rotate(-18deg)
      50%
        -webkit-transform rotate(6deg)
        transform rotate(6deg)
      58%
        -webkit-transform rotate(-74deg)
        transform rotate(-74deg)
      62%
        -webkit-transform rotate(-70deg)
        transform rotate(-70deg)

    @-webkit-keyframes right_hand
      0%
        -webkit-transform rotate(-40deg)
        transform rotate(-40deg)
      10%
        -webkit-transform rotate(-20deg)
        transform rotate(-20deg)
      15%
        -webkit-transform rotate(-5deg)
        transform rotate(-5deg)
      20%
        -webkit-transform rotate(-60deg)
        transform rotate(-60deg)
      25%
        -webkit-transform rotate(0deg)
        transform rotate(0deg)
      30%
        -webkit-transform rotate(-60deg)
        transform rotate(-60deg)
      35%
        -webkit-transform rotate(0deg)
        transform rotate(0deg)
      40%
        -webkit-transform rotate(-40deg)
        transform rotate(-40deg)
      45%
        -webkit-transform rotate(-60deg)
        transform rotate(-60deg)
      50%
        -webkit-transform rotate(10deg)
        transform rotate(10deg)
      60%
        -webkit-transform rotate(-40deg)
        transform rotate(-40deg)


    @keyframes right_hand
      0%
        -webkit-transform rotate(-40deg)
        transform rotate(-40deg)
      10%
        -webkit-transform rotate(-20deg)
        transform rotate(-20deg)
      15%
        -webkit-transform rotate(-5deg)
        transform rotate(-5deg)
      20%
        -webkit-transform rotate(-60deg)
        transform rotate(-60deg)
      25%
        -webkit-transform rotate(0deg)
        transform rotate(0deg)
      30%
        -webkit-transform rotate(-60deg)
        transform rotate(-60deg)
      35%
        -webkit-transform rotate(0deg)
        transform rotate(0deg)
      40%
        -webkit-transform rotate(-40deg)
        transform rotate(-40deg)
      45%
        -webkit-transform rotate(-60deg)
        transform rotate(-60deg)
      50%
        -webkit-transform rotate(10deg)
        transform rotate(10deg)
      60%
        -webkit-transform rotate(-40deg)
        transform rotate(-40deg)

    @-webkit-keyframes right_finger
      0%
        -webkit-transform translateY(16px)
        transform translateY(16px)
      10%
        -webkit-transform none
        transform none
      50%
        -webkit-transform none
        transform none
      60%
        -webkit-transform translateY(16px)
        transform translateY(16px)

    @keyframes right_finger
      0%
        -webkit-transform translateY(16px)
        transform translateY(16px)
      10%
        -webkit-transform none
        transform none
      50%
        -webkit-transform none
        transform none
      60%
        -webkit-transform translateY(16px)
        transform translateY(16px)

    @-webkit-keyframes left_finger
      0%
        -webkit-transform scaleX(0)
        transform scaleX(0)
      10%
        -webkit-transform scaleX(1) rotate(6deg)
        transform scaleX(1) rotate(6deg)
      15%
        -webkit-transform scaleX(1) rotate(0deg)
        transform scaleX(1) rotate(0deg)
      20%
        -webkit-transform scaleX(1) rotate(8deg)
        transform scaleX(1) rotate(8deg)
      25%
        -webkit-transform scaleX(1) rotate(0deg)
        transform scaleX(1) rotate(0deg)
      30%
        -webkit-transform scaleX(1) rotate(7deg)
        transform scaleX(1) rotate(7deg)
      35%
        -webkit-transform scaleX(1) rotate(0deg)
        transform scaleX(1) rotate(0deg)
      40%
        -webkit-transform scaleX(1) rotate(5deg)
        transform scaleX(1) rotate(5deg)
      45%
        -webkit-transform scaleX(1) rotate(0deg)
        transform scaleX(1) rotate(0deg)
      50%
        -webkit-transform scaleX(1) rotate(6deg)
        transform scaleX(1) rotate(6deg)
      58%
        -webkit-transform scaleX(0)
        transform scaleX(0)

    @keyframes left_finger
      0%
        -webkit-transform scaleX(0)
        transform scaleX(0)
      10%
        -webkit-transform scaleX(1) rotate(6deg)
        transform scaleX(1) rotate(6deg)
      15%
        -webkit-transform scaleX(1) rotate(0deg)
        transform scaleX(1) rotate(0deg)
      20%
        -webkit-transform scaleX(1) rotate(8deg)
        transform scaleX(1) rotate(8deg)
      25%
        -webkit-transform scaleX(1) rotate(0deg)
        transform scaleX(1) rotate(0deg)
      30%
        -webkit-transform scaleX(1) rotate(7deg)
        transform scaleX(1) rotate(7deg)
      35%
        -webkit-transform scaleX(1) rotate(0deg)
        transform scaleX(1) rotate(0deg)
      40%
        -webkit-transform scaleX(1) rotate(5deg)
        transform scaleX(1) rotate(5deg)
      45%
        -webkit-transform scaleX(1) rotate(0deg)
        transform scaleX(1) rotate(0deg)
      50%
        -webkit-transform scaleX(1) rotate(6deg)
        transform scaleX(1) rotate(6deg)
      58%
        -webkit-transform scaleX(0)
        transform scaleX(0)

    @-webkit-keyframes head
      0%
        -webkit-transform rotate(-3deg)
        transform rotate(-3deg)
      10%
        -webkit-transform translatex(10px) rotate(7deg)
        transform translatex(10px) rotate(7deg)
      50%
        -webkit-transform translatex(0px) rotate(0deg)
        transform translatex(0px) rotate(0deg)
      56%
        -webkit-transform rotate(-3deg)
        transform rotate(-3deg)

    @keyframes head
      0%
        -webkit-transform rotate(-3deg)
        transform rotate(-3deg)
      10%
        -webkit-transform translatex(10px) rotate(7deg)
        transform translatex(10px) rotate(7deg)
      50%
        -webkit-transform translatex(0px) rotate(0deg)
        transform translatex(0px) rotate(0deg)
      56%
        -webkit-transform rotate(-3deg)
        transform rotate(-3deg)
    /** 10s animation - 10% = 1s */
    @-webkit-keyframes path_circle
      0%
        -webkit-transform translateY(0)
        transform translateY(0)
      10%
        -webkit-transform translateY(-100px) rotate(-5deg)
        transform translateY(-100px) rotate(-5deg)
      55%
        -webkit-transform translateY(-100px) rotate(-360deg)
        transform translateY(-100px) rotate(-360deg)
      58%
        -webkit-transform translateY(-100px) rotate(-360deg)
        transform translateY(-100px) rotate(-360deg)
      63%
        -webkit-transform rotate(-360deg)
        transform rotate(-360deg)

    @keyframes path_circle
      0%
        -webkit-transform translateY(0)
        transform translateY(0)
      10%
        -webkit-transform translateY(-100px) rotate(-5deg)
        transform translateY(-100px) rotate(-5deg)
      55%
        -webkit-transform translateY(-100px) rotate(-360deg)
        transform translateY(-100px) rotate(-360deg)
      58%
        -webkit-transform translateY(-100px) rotate(-360deg)
        transform translateY(-100px) rotate(-360deg)
      63%
        -webkit-transform rotate(-360deg)
        transform rotate(-360deg)

    @-webkit-keyframes path_square
      0%
        -webkit-transform translateY(0)
        transform translateY(0)
      10%
        -webkit-transform translateY(-155px) translatex(-15px) rotate(10deg)
        transform translateY(-155px) translatex(-15px) rotate(10deg)
      55%
        -webkit-transform translateY(-155px) translatex(-15px) rotate(-350deg)
        transform translateY(-155px) translatex(-15px) rotate(-350deg)
      57%
        -webkit-transform translateY(-155px) translatex(-15px) rotate(-350deg)
        transform translateY(-155px) translatex(-15px) rotate(-350deg)
      63%
        -webkit-transform rotate(-360deg)
        transform rotate(-360deg)

    @keyframes path_square
      0%
        -webkit-transform translateY(0)
        transform translateY(0)
      10%
        -webkit-transform translateY(-155px) translatex(-15px) rotate(10deg)
        transform translateY(-155px) translatex(-15px) rotate(10deg)
      55%
        -webkit-transform translateY(-155px) translatex(-15px) rotate(-350deg)
        transform translateY(-155px) translatex(-15px) rotate(-350deg)
      57%
        -webkit-transform translateY(-155px) translatex(-15px) rotate(-350deg)
        transform translateY(-155px) translatex(-15px) rotate(-350deg)
      63%
        -webkit-transform rotate(-360deg)
        transform rotate(-360deg)

    @-webkit-keyframes path_triangle
      0%
        -webkit-transform translateY(0)
        transform translateY(0)
      10%
        -webkit-transform translateY(-172px) translatex(10px) rotate(-10deg)
        transform translateY(-172px) translatex(10px) rotate(-10deg)
      55%
        -webkit-transform translateY(-172px) translatex(10px) rotate(-365deg)
        transform translateY(-172px) translatex(10px) rotate(-365deg)
      58%
        -webkit-transform translateY(-172px) translatex(10px) rotate(-365deg)
        transform translateY(-172px) translatex(10px) rotate(-365deg)
      63%
        -webkit-transform rotate(-360deg)
        transform rotate(-360deg)

    @keyframes path_triangle
      0%
        -webkit-transform translateY(0)
        transform translateY(0)
      10%
        -webkit-transform translateY(-172px) translatex(10px) rotate(-10deg)
        transform translateY(-172px) translatex(10px) rotate(-10deg)
      55%
        -webkit-transform translateY(-172px) translatex(10px) rotate(-365deg)
        transform translateY(-172px) translatex(10px) rotate(-365deg)
      58%
        -webkit-transform translateY(-172px) translatex(10px) rotate(-365deg)
        transform translateY(-172px) translatex(10px) rotate(-365deg)
      63%
        -webkit-transform rotate(-360deg)
        transform rotate(-360deg)
  else if hexo-config('preloader.load_style') == 'ironheart'
    #loading-box
      position fixed
      z-index 1000
      display -webkit-box
      display flex
      -webkit-box-align center
      align-items center
      -webkit-box-pack center
      justify-content center
      -webkit-box-orient vertical
      -webkit-box-direction normal
      flex-direction column
      flex-wrap wrap
      width 100vw
      height 100vh
      overflow hidden

      &.loaded
        .iron-container
          display none

      .iron-circle
        border-radius 50%

      .iron-center
        position absolute
        top 50%
        left 50%
        transform translate(-50%, -50%)

      .iron-container
        z-index 1001
        position relative
        width 300px
        height 300px
        border 1px solid rgb(18, 20, 20)
        background-color #384c50
        box-shadow 0 0 32px 8px rgb(18, 20, 20), 0 0 4px 1px rgb(18, 20, 20) inset
        .iron-box1
          width 238px
          height 238px
          background-color rgb(22, 26, 27)
          box-shadow 0 0 4px 1px #52fefe
        .iron-box2
          width 220px
          height 220px
          background-color #fff
          box-shadow 0 0 5px 1px #52fefe, 0 0 5px 4px #52fefe inset
        .iron-box3
          width 180px
          height 180px
          background-color #073c4b
          box-shadow 0 0 5px 4px #52fefe, 0 0 6px 2px #52fefe inset
        .iron-box4
          width 120px
          height 120px
          border 1px solid #52fefe
          background-color #fff
          box-shadow 0 0 2px 1px #52fefe, 0 0 10px 5px #52fefe inset
        .iron-box5
          width 70px
          height 70px
          border 5px solid #1b4e5f
          box-shadow 0 0 7px 5px #52fefe, 0 0 10px 10px #52fefe inset
        .iron-box6
          position relative
          width 100%
          height 100%
          animation ironrotate 3s linear infinite
          .iron-coil
            position absolute
            width 30px
            height 20px
            top calc(50% - 110px)
            left calc(50% - 15px)
            background-color #073c4b
            box-shadow 0 0 5px #52fefe inset
            transform rotate(calc(var(--i) * 45deg))
            transform-origin center 110px
    @keyframes ironrotate
    	0%
    		transform rotate(0)
    	100%
    		transform rotate(360deg)

  else if hexo-config('preloader.load_style') == 'scarecrow'
    #loading-box
      position fixed
      z-index 1000
      display -webkit-box
      display flex
      -webkit-box-align center
      align-items center
      -webkit-box-pack center
      justify-content center
      -webkit-box-orient vertical
      -webkit-box-direction normal
      flex-direction column
      flex-wrap wrap
      width 100vw
      height 100vh
      overflow hidden
      &.loaded
        .scarecrow
          display none
      .scarecrow
        z-index 1001
        position relative
        animation hop 0.2s ease-in alternate infinite

      .scarecrow__hat
        position relative
        border-top-left-radius 5px
        border-top-right-radius 5px
        border-top 45px solid #515559
        border-left 1px solid transparent
        border-right 1px solid transparent
        width 55px
        margin 0 auto -3px
        z-index 1
        &:before
          content ""
          position absolute
          top -87px
          right -23px
          background-color #515559
          width 9px
          height 55px
          border-radius 100%
          transform rotate(50deg)
        &:after
          content ""
          position absolute
          top 12px
          left -15px
          background-color #515559
          width 85px
          height 10px
          border-radius 40% 40% 70% 70%

      .scarecrow__ribbon
        width 55px
        height 12px
        background-color #d996b5
        margin 0 auto

      .scarecrow__head
        position relative
        background-color #f2f2f2
        width 70px
        height 55px
        margin 0 auto
        border-radius 50%
        display flex
        justify-content space-around
        flex-flow row wrap

      .scarecrow__eye
        width 6px
        height 6px
        background-color #000
        border-radius 50%
        margin 20px 5px 0

      .scarecrow__mouth
        width 45px
        height 15px
        background-color #fff
        border-radius 50%

      .scarecrow__pipe
        position absolute
        top 40px
        left 60px
        width 40px
        height 2px
        background-color #8c8070
        &:before
          content ""
          position absolute
          width 9px
          height 17px
          background-color #8c8070
          border-radius 3px
          left 40px
          top -7px

      .scarecrow__body
        position relative
        width 250px
        z-index 1

      .scarecrow__coat
        position absolute
        top 15px
        left 0
        right 0
        margin-left auto
        margin-right auto
        border-top 100px solid #515559
        border-left 5px solid transparent
        border-right 5px solid transparent
        width 75px

      .scarecrow__bow
        position absolute
        top 20px
        left 0
        right 0
        margin-left auto
        margin-right auto
        background-color #3a485d
        width 10px
        height 10px
        z-index 3
        border-radius 2px
        &:before
          content ""
          position absolute
          top -10px
          left -25px
          width 0
          height 10px
          border-top 10px solid transparent
          border-left 25px solid #5a6b8c
          border-bottom 10px solid transparent
          border-radius 8px
        &:after
          content ""
          position absolute
          top -10px
          right -25px
          width 0
          height 10px
          border-top 10px solid transparent
          border-right 25px solid #5a6b8c
          border-bottom 10px solid transparent
          border-radius 8px

      .scarecrow__shirt
        position absolute
        top 8px
        left 0
        right 0
        margin-left auto
        margin-right auto
        width 30px
        height 35px
        z-index 2
        &:before
          content ""
          position absolute
          top 0
          left -5px
          height 100%
          width 70%
          background-color #dbb2c2
          transform skew(1deg, 35deg)
          border-bottom-left-radius 90px
          border-top-left-radius 15px
          border-bottom-right-radius 15px
          border-top-right-radius 10px
        &:after
          content ""
          position absolute
          top 0
          right -5px
          height 100%
          width 70%
          background-color #dbb2c2
          transform skew(-1deg, -35deg)
          border-top-right-radius 15px
          border-bottom-right-radius 90px
          border-bottom-left-radius 15px
          border-top-left-radius 10px

      .scarecrow__waistcoat
        position absolute
        top 15px
        left -1px
        right 0
        margin-left auto
        margin-right auto
        width 35px
        height 50px
        &:before
          content ""
          position absolute
          top 0
          left -4px
          height 100%
          width 65%
          background-color #83a6bc
          transform skew(0deg, 40deg)
          border-bottom-left-radius 90px
          border-top-left-radius 90px
          border-bottom-right-radius 15px
        &:after
          content ""
          position absolute
          top 0
          right -5px
          height 100%
          width 65%
          background-color #83a6bc
          transform skew(0deg, -40deg)
          border-top-right-radius 90px
          border-bottom-right-radius 90px
          border-bottom-left-radius 15px

      .scarecrow__coattails
        position absolute
        top 105px
        left 0
        right 0
        margin-left auto
        margin-right auto
        width 75px
        height 120px
        z-index 1
        &:before
          content ""
          position absolute
          top 0
          left 8px
          height 100%
          width 60%
          background-color #515559
          transform-origin top
          transform skew(-25deg, 30deg) rotate(0deg)
          border-bottom-left-radius 50px
          border-bottom-right-radius 5px
          animation coattails-left 0.2s ease-in alternate infinite
        &:after
          content ""
          position absolute
          top 0
          right 8px
          height 100%
          width 60%
          background-color #515559
          transform-origin top
          transform skew(25deg, -30deg) rotate(0deg)
          border-bottom-right-radius 50px
          border-bottom-left-radius 5px
          animation coattails-right 0.2s ease-in alternate infinite

      .scarecrow__pants
        position absolute
        top 115px
        left 0
        right 0
        margin-left auto
        margin-right auto
        width 50px
        height 150px
        &:before
          content ""
          position absolute
          top 0
          left -8px
          height 100%
          width 60%
          background-color #393c3e
          transform rotate(0deg)
          transform-origin top
          animation pants 0.5s linear alternate infinite
        &:after
          content ""
          position absolute
          top 0
          right -8px
          height 100%
          width 60%
          background-color #393c3e
          transform rotate(0deg)
          transform-origin top
          animation pants 0.3s linear alternate infinite

      .scarecrow__sleeve
        position absolute
        top 15px
        background-color #515559
        width 80px
        height 25px

      .scarecrow__sleeve--l
        left 10px
        &:before
          content ""
          position absolute
          top -3px
          left -22px
          width 0
          height 25px
          border-top 3px solid transparent
          border-left 25px solid #515559
          border-bottom 3px solid transparent
          border-radius 3px

      .scarecrow__sleeve--r
        right 10px
        &:before
          content ""
          position absolute
          top -3px
          right -22px
          width 0
          height 25px
          border-top 3px solid transparent
          border-right 25px solid #515559
          border-bottom 3px solid transparent
          border-radius 3px

      .scarecrow__glove
        position absolute
        top 12px
        width 0px
        height 12px
        &:before
          content ""
          position absolute
          top -7px
          border-radius 100%
          background-color #f2f2f2
          width 35px
          height 15px

      .scarecrow__glove--l
        border-top 3px solid transparent
        border-right 20px solid #f2f2f2
        border-bottom 3px solid transparent
        left -50px
        &:before
          transform-origin right
          left -30px
          transform rotate(0deg)
          animation glove-l 0.2s linear alternate infinite

      .scarecrow__glove--r
        border-top 3px solid transparent
        border-left 20px solid #f2f2f2
        border-bottom 3px solid transparent
        right -50px
        &:before
          transform-origin left
          right -30px
          transform rotate(0deg)
          animation glove-r 0.2s linear alternate infinite

      .scarecrow__arms
        position absolute
        left 50%
        transform translate(-50%, -50%)
        background-color #8c8070
        width 350px
        height 8px
        border-radius 5px
        margin 20px auto

      .scarecrow__leg
        position relative
        background-color #8c8070
        width 8px
        height 380px
        border-bottom-left-radius 5px
        border-bottom-right-radius 5px
        margin 0 auto

    @keyframes hop
      0%
        transform translateY(-10px)
      100%
        transform translateY(10px)

    @keyframes coattails-left
      0%
        transform skew(-25deg, 30deg) rotate(-3deg)
      100%
        transform skew(-25deg, 30deg) rotate(3deg)

    @keyframes coattails-right
      0%
        transform skew(25deg, -30deg) rotate(3deg)
      100%
        transform skew(25deg, -30deg) rotate(-3deg)

    @keyframes pants
      0%
        transform rotate(3deg)
      100%
        transform rotate(-3deg)

    @keyframes glove-l
      0%
        transform rotate(-50deg)
      100%
        transform rotate(-30deg)

    @keyframes glove-r
      0%
        transform rotate(50deg)
      100%
        transform rotate(30deg)
  else if hexo-config('preloader.load_style') == 'image'
    #loading-box
      position fixed
      z-index 1000
      display -webkit-box
      display flex
      -webkit-box-align center
      align-items center
      -webkit-box-pack center
      justify-content center
      -webkit-box-orient vertical
      -webkit-box-direction normal
      flex-direction column
      flex-wrap wrap
      width 100vw
      height 100vh
      overflow hidden

      .load-image
        position fixed
        z-index 1001
        display flex

      &.loaded
        .load-image
          display none
  else
    #loading-box
      .spinner-box
        position fixed
        z-index 1001
        display flex
        justify-content center
        align-items center
        width 100%
        height 100vh

        .configure-border-1
          position absolute
          padding 3px
          width 115px
          height 115px
          background #ffab91
          animation configure-clockwise 3s ease-in-out 0s infinite alternate

        .configure-border-2
          left -115px
          padding 3px
          width 115px
          height 115px
          background rgb(63, 249, 220)
          transform rotate(45deg)
          animation configure-xclockwise 3s ease-in-out 0s infinite alternate

        .loading-word
          position absolute
          color var(--preloader-color)
          font-size .8rem

        .configure-core
          width 100%
          height 100%
          background-color var(--preloader-bg)

      &.loaded
        .spinner-box
          display none

    @keyframes configure-clockwise
      0%
        transform rotate(0)

      25%
        transform rotate(90deg)

      50%
        transform rotate(180deg)

      75%
        transform rotate(270deg)

      100%
        transform rotate(360deg)

    @keyframes configure-xclockwise
      0%
        transform rotate(45deg)

      25%
        transform rotate(-45deg)

      50%
        transform rotate(-135deg)

      75%
        transform rotate(-225deg)

      100%
        transform rotate(-315deg)

修改 [Blogroot]\themes\butterfly\layout\includes\layout.pug，以适配接下来需要添加的配置项。

主题版本>=3.6.0

    body
-     if theme.preloader
+     if theme.preloader.enable
        !=partial('includes/loading/loading', {}, {cache: true})

修改 [Blogroot]\themes\butterfly\source\css\var.styl，添加自定义修改背景色的配置项。(大概 98 行的位置)

      // preloader
-     $preloader-bg = #37474f
+     $preloader-bg = hexo-config('preloader.enable') && hexo-config('preloader.load_color') ? convert(hexo-config('preloader.load_color')) : #37474f
      $preloader-word-color = #fff

修改 [Blogroot]\_config.butterfly.yml 的 preloader 配置项。

    # Loading Animation (加載動畫)
-   preloader: true
+   preloader:
+     enable: true # true|false
+     load_color: '#000000' # '#37474f'
+     load_style: wizard # # spinner-box|wizard|ironheart|scarecrow|image
+     load_image:  # url