Butterfly主题 自定义 Loading 加载动画

查看Loading 加载动画效果图

自定义Butterfly主题 Loading 加载动画参考教程

hexo-butterfly 自定义 Loading 加载动画

https://blog.meta-code.top/2022/06/18/2022-73/

hexo-butterfly 自定义 Loading 加载动画

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

一、修改loading.pug

修改[Blogroot]\themes\butterfly\layout\includes\loading\fullpage-loading.pug，下面代码中提供了多种款式，算上默认的旋转盒子加载动画，一共有12种，读者可以根据代码结构自行改写移除不需要的内容。

修改前不管，修改后如下：

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 'image-fade-in-out'
      include ./load_style/image-fade-in-out.pug
    when 'image-pulsing'
      include ./load_style/image-pulsing.pug
    when 'image-Rotating'
      include ./load_style/image-Rotating.pug
    when 'doodle'
      include ./load_style/doodle.pug
    when 'hyperspace'
      include ./load_style/hyperspace.pug
    default
      include ./load_style/default.pug

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

    preloader.initLoading()
    window.addEventListener('load',() => { preloader.endLoading() })
    setTimeout(function(){preloader.endLoading();}, 3000);  // 超时3秒钟自动退出loading动画

    if (!{theme.pjax && theme.pjax.enable}) {
      document.addEventListener('pjax:send', () => { preloader.initLoading() })
      document.addEventListener('pjax:complete', () => { preloader.endLoading() })
    }
  })()

此处第一行的if用于判断preloader功能是否打开。下面的case和when则是根据配置项的内容加载指定的页面元素。default表示默认使用butterfly自带的旋转盒子动画。

二、创建动画结构模板文件夹

新建动画结构模板存放的文件夹，如无特别提示，所有动画模板均存放在[Blogroot]\themes\butterfly\layout\includes\loading\load_style\目录下。

1,default默认2,gear旋转齿轮3,image图片4,ironheart钢铁侠核心5,scarecrow稻草人跳动6,triangles旋转三角7,wizard巫师施法8,image-fade-in-out渐入渐出动画9,image-pulsing脉冲动画10,image-Rotating旋转动画11,doodle彩绘心形12,hyperspace星际穿越

新建[Blogroot]\themes\butterfly\layout\includes\loading\load_style\default.pug

#loading-box
  .loading-left-bg
  .loading-right-bg
  .spinner-box
    .configure-border-1
      .configure-core
    .configure-border-2
      .configure-core
    .loading-word= _p('loading')

新建[Blogroot]\themes\butterfly\layout\includes\loading\load_style\gear.pug

#loading-box
  .gear-loader
    .gear-loader_overlay
    .gear-loader_cogs
      .gear-loader_cogs__top
        .gear-top_part
        .gear-top_part
        .gear-top_part
        .gear-top_hole
      .gear-loader_cogs__left
        .gear-left_part
        .gear-left_part
        .gear-left_part
        .gear-left_hole
      .gear-loader_cogs__bottom
        .gear-bottom_part
        .gear-bottom_part
        .gear-bottom_part
        .gear-bottom_hole

新建[Blogroot]\themes\butterfly\layout\includes\loading\load_style\image.pug

.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)

#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
    width 100px // Set the diameter to 100px
    height 100px // Set the diameter to 100px
    border-radius 50% // Make the image circular

  &.loaded
    .load-image
      display none

新建[Blogroot]\themes\butterfly\layout\includes\loading\load_style\ironheart.pug

#loading-box
  .loading-left-bg
  .loading-right-bg
  .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')

新建[Blogroot]\themes\butterfly\layout\includes\loading\load_style\scarecrow.pug

#loading-box
  .loading-left-bg
  .loading-right-bg
  .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

新建[Blogroot]\themes\butterfly\layout\includes\loading\load_style\triangles.pug

#loading-box
  .triangles-wrap
    .triangles-eiz
    .triangles-seiz
    .triangles-sei
    .triangles-fei
    .triangles-feir
    .triangles-trei
    .triangles-dvai
    .triangles-ein
    .triangles-zero

新建[Blogroot]\themes\butterfly\layout\includes\loading\load_style\wizard.pug

#loading-box
  .loading-left-bg
  .loading-right-bg
  .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

新建[Blogroot]\themes\butterfly\layout\includes\loading\load_style\image-fade-in-out.pug

- var loadimage = theme.preloader.load_image ? theme.preloader.load_image : theme.error_img.post_page
#loading-box
  .loading-left-bg
  .loading-right-bg
  img.load-image(src=url_for(loadimage) alt='')

新建[Blogroot]\themes\butterfly\layout\includes\loading\load_style\image-pulsing.pug

- var loadimage = theme.preloader.load_image ? theme.preloader.load_image : theme.error_img.post_page
#loading-box
  .loading-left-bg
  .loading-right-bg
  img.load-image(src=url_for(loadimage) alt='')

新建[Blogroot]\themes\butterfly\layout\includes\loading\load_style\image-Rotating.pug

- var loadimage = theme.preloader.load_image ? theme.preloader.load_image : theme.error_img.post_page
#loading-box
  .loading-left-bg
  .loading-right-bg
  img.load-image(src=url_for(loadimage) alt='')

新建[Blogroot]\themes\butterfly\layout\includes\loading\load_style\doodle.pug

#loading-box
  style.
    css-doodle {--color: @p(#51eaea, #fffde1, #ff9d76, #FB3569);--rule: (:doodle {@grid: 30x1 / 18vmin;--deg: @p(-180deg, 180deg);}:container {perspective: 30vmin;}:after, :before {content: '';background: var(--color); @place-cell: @r(100%) @r(100%); @size: @r(6px); @shape: heart;} @place-cell: center; @size: 100%;box-shadow: @m2(0 0 50px var(--color));background: @m100(radial-gradient(var(--color) 50%, transparent 0)@r(-20%, 120%) @r(-20%, 100%) / 1px 1px no-repeat); will-change: transform, opacity; animation: scale-up 12s linear infinite; animation-delay: calc(-12s / @I * @i); @keyframes scale-up { 0%, 95.01%, 100% {transform: translateZ(0) rotate(0);opacity: 0;}10% {opacity: 1;}95% {transform: translateZ(35vmin) rotateZ(@var(--deg));}})}
  css-doodle(use="var(--rule)")
  script(async src='https://npm.elemecdn.com/css-doodle@0.15.3/css-doodle.min.js')

新建[Blogroot]\themes\butterfly\layout\includes\loading\load_style\hyperspace.pug

#loading-box
  .space-scene
    .space-wrap
      .space-wall.space-wall-right
      .space-wall.space-wall-left
      .space-wall.space-wall-top
      .space-wall.space-wall-bottom
      .space-wall.space-wall-back
    .space-wrap
      .space-wall.space-wall-right
      .space-wall.space-wall-left
      .space-wall.space-wall-top
      .space-wall.space-wall-bottom
      .space-wall.space-wall-back

三、修改loading.styl

修改[Blogroot]\themes\butterfly\source\css\_layout\loading.styl

修改前不管，修改后如下：

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') == 'image-fade-in-out'
    @import './_load_style/image-fade-in-out'
  else if hexo-config('preloader.load_style') == 'image-pulsing'
    @import './_load_style/image-pulsing'
  else if hexo-config('preloader.load_style') == 'image-Rotating'
    @import './_load_style/image-Rotating'
  else if hexo-config('preloader.load_style') == 'doodle'
    @import './_load_style/doodle'
  else if hexo-config('preloader.load_style') == 'hyperspace'
    @import './_load_style/hyperspace'
  else
    @import './_load_style/default'

几个if的判断机制与fullpage-loading.pug类似，都是根据配置项来决定加载的样式。且默认使用旋转盒子动画。

四、创建动画样式模板文件夹

新建动画样式模板存放的文件夹，如无特别提示，所有动画样式均存放在

[Blogroot]\themes\butterfly\source\css\_load_style\目录下

1,default默认2,gear旋转齿轮3,image图片4,ironheart钢铁侠核心5,scarecrow稻草人跳动6,triangles旋转三角7,wizard巫师施法8,image-fade-in-out渐入渐出动画9,image-pulsing脉冲动画10,image-Rotating旋转动画11,doodle彩绘心形12,hyperspace星际穿越

新建[Blogroot]\themes\butterfly\source\css\_load_style\default.styl

.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)
#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 16px

    .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\source\css\_load_style\gear.styl

#loading-box
  position fixed
  z-index 1000
  width 100vw
  height 100vh
  overflow hidden
  text-align center
  &.loaded
    z-index -1000
    .gear-loader
      display none
  .gear-loader
    height 100%
    position relative
    margin auto
    width 400px
  .gear-loader_overlay
    width 150px
    height 150px
    background transparent
    box-shadow 0px 0px 0px 1000px rgba(255, 255, 255, 0.67), 0px 0px 19px 0px rgba(0, 0, 0, 0.16) inset
    border-radius 100%
    z-index -1
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    margin auto
  .gear-loader_cogs
    z-index -2
    width 100px
    height 100px
    top -120px !important
    position absolute
    left 0
    right 0
    top 0
    bottom 0
    margin auto
  .gear-loader_cogs__top
    position relative
    width 100px
    height 100px
    transform-origin 50px 50px
    -webkit-animation rotate 10s infinite linear
    animation rotate 10s infinite linear
    div
      &:nth-of-type(1)
        transform rotate(30deg)
      &:nth-of-type(2)
        transform rotate(60deg)
      &:nth-of-type(3)
        transform rotate(90deg)
      &.gear-top_part
        width 100px
        border-radius 10px
        position absolute
        height 100px
        background #f98db9
      &.gear-top_hole
        width 50px
        height 50px
        border-radius 100%
        background white
        position absolute
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        margin auto
  .gear-loader_cogs__left
    position relative
    width 80px
    transform rotate(16deg)
    top 28px
    transform-origin 40px 40px
    animation rotate_left 10s 0.1s infinite reverse linear
    left -24px
    height 80px
    div
      &:nth-of-type(1)
        transform rotate(30deg)
      &:nth-of-type(2)
        transform rotate(60deg)
      &:nth-of-type(3)
        transform rotate(90deg)
      &.gear-left_part
        width 80px
        border-radius 6px
        position absolute
        height 80px
        background #97ddff
      &.gear-left_hole
        width 40px
        height 40px
        border-radius 100%
        background white
        position absolute
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        margin auto
  .gear-loader_cogs__bottom
    position relative
    width 60px
    top -65px
    transform-origin 30px 30px
    -webkit-animation rotate_left 10.2s 0.4s infinite linear
    animation rotate_left 10.2s 0.4s infinite linear
    transform rotate(4deg)
    left 79px
    height 60px
    div
      &:nth-of-type(1)
        transform rotate(30deg)
      &:nth-of-type(2)
        transform rotate(60deg)
      &:nth-of-type(3)
        transform rotate(90deg)
      &.gear-bottom_part
        width 60px
        border-radius 5px
        position absolute
        height 60px
        background #ffcd66
      &.gear-bottom_hole
        width 30px
        height 30px
        border-radius 100%
        background white
        position absolute
        position absolute
        left 0
        right 0
        top 0
        bottom 0
        margin auto



/* Animations */
@-webkit-keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@-webkit-keyframes rotate_left {
  from {
    transform: rotate(16deg);
  }
  to {
    transform: rotate(376deg);
  }
}
@keyframes rotate_left {
  from {
    transform: rotate(16deg);
  }
  to {
    transform: rotate(376deg);
  }
}
@-webkit-keyframes rotate_right {
  from {
    transform: rotate(4deg);
  }
  to {
    transform: rotate(364deg);
  }
}
@keyframes rotate_right {
  from {
    transform: rotate(4deg);
  }
  to {
    transform: rotate(364deg);
  }
}

新建[Blogroot]\themes\butterfly\source\css\_load_style\image.styl

@keyframes pulse
  0%
    transform scale(1)
  50%
    transform scale(1.2)
  100%
    transform scale(1)

.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)

#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
    width 100px
    height 100px
    border-radius 50%
    animation pulse 2s ease-in-out infinite // Adds a pulsing effect脉冲效果

  &.loaded
    .load-image
      display none

新建[Blogroot]\themes\butterfly\source\css\_load_style\ironheart.styl

.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)
#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)

新建[Blogroot]\themes\butterfly\source\css\_load_style\scarecrow.styl

.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)

#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)

新建[Blogroot]\themes\butterfly\source\css\_load_style\triangles.styl

#loading-box
  position fixed
  z-index 1000
  width 100vw
  height 100vh
  overflow hidden
  &.loaded
    z-index -1000
    .triangles-wrap
      display none

.triangles-wrap
  position absolute
  top 50%
  left 50%
  transform translate(-50%,-66.6666666666666666%)
  -ms-transform translate(-50%,-66.6666666666666666%)
  -webkit-transform translate(-50%,-66.6666666666666666%)
  -webkit-animation animascale 2s linear alternate infinite
  animation animascale 2s linear alternate both infinite



.triangles-zero, .triangles-ein, .triangles-dvai, .triangles-trei, .triangles-feir, .triangles-fei, .triangles-sei, .triangles-seiz, .triangles-eiz
  width 0px
  height 0px
  position absolute
  top 50%
  left 50%
  transform translate(-50%,-66.6666666666666666%)
  -ms-transform translate(-50%,-66.6666666666666666%)
  -webkit-transform translate(-50%,-66.6666666666666666%)

.triangles-zero
  border-style solid
  border-width 0 5px 8.7px 5px
  border-color transparent transparent #1274b6 transparent
  -webkit-animation anima 2s linear reverse both infinite 4s, animacolorzero 2s linear alternate both infinite
  animation anima 2s linear reverse both infinite 4s, animacolorzero 2s linear alternate both infinite
  -webkit-transform-origin top left

.triangles-ein
  border-style solid
  border-width 0 10px 17.3px 10px
  border-color transparent transparent #167bbf transparent
  -webkit-animation anima 2s linear both infinite 4.2s, animacolorein 2s linear alternate both infinite
  animation anima 2s linear both infinite 4.2s, animacolorein 2s linear alternate both infinite
  -webkit-transform-origin top left

.triangles-dvai
  border-style solid
  border-width 0 20px 34.6px 20px
  border-color transparent transparent #1b82c8 transparent
  -webkit-animation anima 2s linear reverse both infinite 4.4s, animacolordvai 2s linear alternate both infinite
  animation anima 2s linear reverse both infinite 4.4s, animacolordvai 2s linear alternate both infinite
  -webkit-transform-origin top left

.triangles-trei
  border-style solid
  border-width 0 40px 69.3px 40px
  border-color transparent transparent #228bd2 transparent
  -webkit-animation anima 2s linear  both infinite 4.6s, animacolortrei 2s linear alternate both infinite
  animation anima 2s linear  both infinite 4.6s, animacolortrei 2s linear alternate both infinite
  -webkit-transform-origin top left

.triangles-feir
  border-style solid
  border-width 0 80px 138.6px 80px
  border-color transparent transparent #2992d9 transparent
  -webkit-animation anima 2s linear reverse  both infinite 4.8s, animacolorfeir 2s linear alternate both infinite
  animation anima 2s linear reverse  both infinite 4.8s, animacolorfeir 2s linear alternate both infinite
  -webkit-transform-origin top left

.triangles-fei
  border-style solid
  border-width 0 160px 277.1px 160px
  border-color transparent transparent #3498db transparent
  -webkit-animation anima 2s linear  both infinite 5s, animacolorfei 2s linear alternate both infinite
  animation anima 2s linear  both infinite 5s, animacolorfei 2s linear alternate both infinite
  -webkit-transform-origin top left

.triangles-sei
  border-style solid
  border-width 0 320px 554.3px 320px
  border-color transparent transparent #3f9edd transparent
  -webkit-animation anima 2s linear reverse  both infinite 5.2s, animacolorsei 2s linear alternate both infinite
  animation anima 2s linear reverse  both infinite 5.2s, animacolorsei 2s linear alternate both infinite
  -webkit-transform-origin top left

.triangles-seiz
  border-style solid
  border-width 0 640px 1108.5px 640px
  border-color transparent transparent #48a2de transparent
  -webkit-animation anima 2s linear  both infinite 5.4s, animacolorseiz 2s linear alternate both infinite
  animation anima 2s linear  both infinite 5.4s, animacolorseiz 2s linear alternate both infinite
  -webkit-transform-origin top left

.triangles-eiz
  border-style solid
  border-width 0 1280px 2217.0px 1280px
  border-color transparent transparent #59aae0 transparent
  -webkit-animation anima 2s linear reverse  both infinite 5.6s, animacoloreiz 2s linear alternate both infinite
  animation anima 2s linear reverse  both infinite 5.6s, animacoloreiz 2s linear alternate both infinite
  -webkit-transform-origin top left


@-webkit-keyframes anima
  from
    -webkit-transform: rotate(0deg) translate(-50%,-66.6666666666666666%)
  to
    -webkit-transform: rotate(360deg) translate(-50%,-66.6666666666666666%)


@keyframes anima
    from
      transform rotate(0deg) translate(-50%,-66.6666666666666666%)
    to
      transform rotate(360deg) translate(-50%,-66.6666666666666666%)



/*
@-webkit-keyframes animacolorzero
{
0%{border-color: transparent transparent #602520 transparent;}
16.6%{border-color: transparent transparent #672922 transparent;}
33.3%{border-color: transparent transparent #6F2E25 transparent;}
50%{border-color: transparent transparent #772F28 transparent;}
66.6%{border-color: transparent transparent #82332B transparent;}
83.3%{border-color: transparent transparent #8A372E transparent;}
100%{border-color: transparent transparent #A14436 transparent;}
}

@keyframes animacolorzero
{
0%{border-color: transparent transparent #602520 transparent;}
16.6%{border-color: transparent transparent #672922 transparent;}
33.3%{border-color: transparent transparent #6F2E25 transparent;}
50%{border-color: transparent transparent #772F28 transparent;}
66.6%{border-color: transparent transparent #82332B transparent;}
83.3%{border-color: transparent transparent #8A372E transparent;}
100%{border-color: transparent transparent #A14436 transparent;}
}


@-webkit-keyframes animacolorein
{
0%{border-color: transparent transparent #672922 transparent;}
16.6%{border-color: transparent transparent #6F2E25 transparent;}
33.3%{border-color: transparent transparent #772F28 transparent;}
50%{border-color: transparent transparent #82332B transparent;}
66.6%{border-color: transparent transparent #8A372E transparent;}
83.3%{border-color: transparent transparent #A14436 transparent;}
100%{border-color: transparent transparent #602520 transparent;}
}

@keyframes animacolorein
{
0%{border-color: transparent transparent #672922 transparent;}
16.6%{border-color: transparent transparent #6F2E25 transparent;}
33.3%{border-color: transparent transparent #772F28 transparent;}
50%{border-color: transparent transparent #82332B transparent;}
66.6%{border-color: transparent transparent #8A372E transparent;}
83.3%{border-color: transparent transparent #A14436 transparent;}
100%{border-color: transparent transparent #602520 transparent;}
}


@-webkit-keyframes animacolordvai
{
0%{border-color: transparent transparent #6F2E25 transparent;}
16.6%{border-color: transparent transparent #772F28 transparent;}
33.3%{border-color: transparent transparent #82332B transparent;}
50%{border-color: transparent transparent #8A372E transparent;}
66.6%{border-color: transparent transparent #A14436 transparent;}
83.3%{border-color: transparent transparent #602520 transparent;}
100%{border-color: transparent transparent #672922 transparent;}
}

@keyframes animacolordvai
{
0%{border-color: transparent transparent #6F2E25 transparent;}
16.6%{border-color: transparent transparent #772F28 transparent;}
33.3%{border-color: transparent transparent #82332B transparent;}
50%{border-color: transparent transparent #8A372E transparent;}
66.6%{border-color: transparent transparent #A14436 transparent;}
83.3%{border-color: transparent transparent #602520 transparent;}
100%{border-color: transparent transparent #672922 transparent;}
}


@-webkit-keyframes animacolortrei
{
0%{border-color: transparent transparent #772F28 transparent;}
16.6%{border-color: transparent transparent #82332B transparent;}
33.3%{border-color: transparent transparent #8A372E transparent;}
50%{border-color: transparent transparent #A14436 transparent;}
66.6%{border-color: transparent transparent #602520 transparent;}
83.3%{border-color: transparent transparent #672922 transparent;}
100%{border-color: transparent transparent #6F2E25 transparent;}
}

@keyframes animacolortrei
{
0%{border-color: transparent transparent #772F28 transparent;}
16.6%{border-color: transparent transparent #82332B transparent;}
33.3%{border-color: transparent transparent #8A372E transparent;}
50%{border-color: transparent transparent #A14436 transparent;}
66.6%{border-color: transparent transparent #602520 transparent;}
83.3%{border-color: transparent transparent #672922 transparent;}
100%{border-color: transparent transparent #6F2E25 transparent;}
}


@-webkit-keyframes animacolorfeir
{
0%{border-color: transparent transparent #82332B transparent;}
16.6%{border-color: transparent transparent #8A372E transparent;}
33.3%{border-color: transparent transparent #A14436 transparent;}
50%{border-color: transparent transparent #602520 transparent;}
66.6%{border-color: transparent transparent #672922 transparent;}
83.3%{border-color: transparent transparent #6F2E25 transparent;}
100%{border-color: transparent transparent #772F28 transparent;}
}

@keyframes animacolorfeir
{
0%{border-color: transparent transparent #82332B transparent;}
16.6%{border-color: transparent transparent #8A372E transparent;}
33.3%{border-color: transparent transparent #A14436 transparent;}
50%{border-color: transparent transparent #602520 transparent;}
66.6%{border-color: transparent transparent #672922 transparent;}
83.3%{border-color: transparent transparent #6F2E25 transparent;}
100%{border-color: transparent transparent #772F28 transparent;}
}



@-webkit-keyframes animacolorfei
{
0%{border-color: transparent transparent #8A372E transparent;}
16.6%{border-color: transparent transparent #A14436 transparent;}
33.3%{border-color: transparent transparent #602520 transparent;}
50%{border-color: transparent transparent #672922 transparent;}
66.6%{border-color: transparent transparent #6F2E25 transparent;}
83.3%{border-color: transparent transparent #772F28 transparent;}
100%{border-color: transparent transparent #82332B transparent;}
}

@keyframes animacolorfei
{
0%{border-color: transparent transparent #8A372E transparent;}
16.6%{border-color: transparent transparent #A14436 transparent;}
33.3%{border-color: transparent transparent #602520 transparent;}
50%{border-color: transparent transparent #672922 transparent;}
66.6%{border-color: transparent transparent #6F2E25 transparent;}
83.3%{border-color: transparent transparent #772F28 transparent;}
100%{border-color: transparent transparent #82332B transparent;}
}




@-webkit-keyframes animacolorsei
{
0%{border-color: transparent transparent #A14436 transparent;}
16.6%{border-color: transparent transparent #602520 transparent;}
33.3%{border-color: transparent transparent #672922 transparent;}
50%{border-color: transparent transparent #6F2E25 transparent;}
66.6%{border-color: transparent transparent #772F28 transparent;}
83.3%{border-color: transparent transparent #82332B transparent;}
100%{border-color: transparent transparent #8A372E transparent;}
}

@keyframes animacolorsei
{
0%{border-color: transparent transparent #A14436 transparent;}
16.6%{border-color: transparent transparent #602520 transparent;}
33.3%{border-color: transparent transparent #672922 transparent;}
50%{border-color: transparent transparent #6F2E25 transparent;}
66.6%{border-color: transparent transparent #772F28 transparent;}
83.3%{border-color: transparent transparent #82332B transparent;}
100%{border-color: transparent transparent #8A372E transparent;}
}*/

@-webkit-keyframes animacolorzero
{
0%{border-color: transparent transparent #1274b6 transparent;}
12.5%{border-color: transparent transparent #167bbf transparent;}
25%{border-color: transparent transparent #1b82c8 transparent;}
37.5%{border-color: transparent transparent #228bd2 transparent;}
50%{border-color: transparent transparent #2992d9 transparent;}
62.5%{border-color: transparent transparent #3498db transparent;}
75%{border-color: transparent transparent #3f9edd transparent;}
87.5%{border-color: transparent transparent #48a2de transparent;}
100%{border-color: transparent transparent #59aae0 transparent;}
}

@keyframes animacolorzero
{
0%{border-color: transparent transparent #1274b6 transparent;}
12.5%{border-color: transparent transparent #167bbf transparent;}
25%{border-color: transparent transparent #1b82c8 transparent;}
37.5%{border-color: transparent transparent #228bd2 transparent;}
50%{border-color: transparent transparent #2992d9 transparent;}
62.5%{border-color: transparent transparent #3498db transparent;}
75%{border-color: transparent transparent #3f9edd transparent;}
87.5%{border-color: transparent transparent #48a2de transparent;}
100%{border-color: transparent transparent #59aae0 transparent;}
}

@-webkit-keyframes animacolorein
{
0%{border-color: transparent transparent #167bbf transparent;}
12.5%{border-color: transparent transparent #1b82c8 transparent;}
25%{border-color: transparent transparent #228bd2 transparent;}
37.5%{border-color: transparent transparent #2992d9 transparent;}
50%{border-color: transparent transparent #3498db transparent;}
62.5%{border-color: transparent transparent #3f9edd transparent;}
75%{border-color: transparent transparent #48a2de transparent;}
87.5%{border-color: transparent transparent #59aae0 transparent;}
100%{border-color: transparent transparent #1274b6 transparent;}
}

@keyframes animacolorein
{
0%{border-color: transparent transparent #167bbf transparent;}
12.5%{border-color: transparent transparent #1b82c8 transparent;}
25%{border-color: transparent transparent #228bd2 transparent;}
37.5%{border-color: transparent transparent #2992d9 transparent;}
50%{border-color: transparent transparent #3498db transparent;}
62.5%{border-color: transparent transparent #3f9edd transparent;}
75%{border-color: transparent transparent #48a2de transparent;}
87.5%{border-color: transparent transparent #59aae0 transparent;}
100%{border-color: transparent transparent #1274b6 transparent;}
}

@-webkit-keyframes animacolordvai
{
0%{border-color: transparent transparent #1b82c8 transparent;}
12.5%{border-color: transparent transparent #228bd2 transparent;}
25%{border-color: transparent transparent #2992d9 transparent;}
37.5%{border-color: transparent transparent #3498db transparent;}
50%{border-color: transparent transparent #3f9edd transparent;}
62.5%{border-color: transparent transparent #48a2de transparent;}
75%{border-color: transparent transparent #59aae0 transparent;}
87.5%{border-color: transparent transparent #1274b6 transparent;}
100%{border-color: transparent transparent #167bbf transparent;}
}

@keyframes animacolordvai
{
0%{border-color: transparent transparent #1b82c8 transparent;}
12.5%{border-color: transparent transparent #228bd2 transparent;}
25%{border-color: transparent transparent #2992d9 transparent;}
37.5%{border-color: transparent transparent #3498db transparent;}
50%{border-color: transparent transparent #3f9edd transparent;}
62.5%{border-color: transparent transparent #48a2de transparent;}
75%{border-color: transparent transparent #59aae0 transparent;}
87.5%{border-color: transparent transparent #1274b6 transparent;}
100%{border-color: transparent transparent #167bbf transparent;}
}

@-webkit-keyframes animacolortrei
{
0%{border-color: transparent transparent #228bd2 transparent;}
12.5%{border-color: transparent transparent #2992d9 transparent;}
25%{border-color: transparent transparent #3498db transparent;}
37.5%{border-color: transparent transparent #3f9edd transparent;}
50%{border-color: transparent transparent #48a2de transparent;}
62.5%{border-color: transparent transparent #59aae0 transparent;}
75%{border-color: transparent transparent #1274b6 transparent;}
87.5%{border-color: transparent transparent #167bbf transparent;}
100%{border-color: transparent transparent #1b82c8 transparent;}
}

@keyframes animacolortrei
{
0%{border-color: transparent transparent #228bd2 transparent;}
12.5%{border-color: transparent transparent #2992d9 transparent;}
25%{border-color: transparent transparent #3498db transparent;}
37.5%{border-color: transparent transparent #3f9edd transparent;}
50%{border-color: transparent transparent #48a2de transparent;}
62.5%{border-color: transparent transparent #59aae0 transparent;}
75%{border-color: transparent transparent #1274b6 transparent;}
87.5%{border-color: transparent transparent #167bbf transparent;}
100%{border-color: transparent transparent #1b82c8 transparent;}
}

@-webkit-keyframes animacolorfeir
{
0%{border-color: transparent transparent #2992d9 transparent;}
12.5%{border-color: transparent transparent #3498db transparent;}
25%{border-color: transparent transparent #3f9edd transparent;}
37.5%{border-color: transparent transparent #48a2de transparent;}
50%{border-color: transparent transparent #59aae0 transparent;}
62.5%{border-color: transparent transparent #1274b6 transparent;}
75%{border-color: transparent transparent #167bbf transparent;}
87.5%{border-color: transparent transparent #1b82c8 transparent;}
100%{border-color: transparent transparent #228bd2 transparent;}
}

@keyframes animacolorfeir
{
0%{border-color: transparent transparent #2992d9 transparent;}
12.5%{border-color: transparent transparent #3498db transparent;}
25%{border-color: transparent transparent #3f9edd transparent;}
37.5%{border-color: transparent transparent #48a2de transparent;}
50%{border-color: transparent transparent #59aae0 transparent;}
62.5%{border-color: transparent transparent #1274b6 transparent;}
75%{border-color: transparent transparent #167bbf transparent;}
87.5%{border-color: transparent transparent #1b82c8 transparent;}
100%{border-color: transparent transparent #228bd2 transparent;}
}

@-webkit-keyframes animacolorfei
{
0%{border-color: transparent transparent #3498db transparent;}
12.5%{border-color: transparent transparent #3f9edd transparent;}
25%{border-color: transparent transparent #48a2de transparent;}
37.5%{border-color: transparent transparent #59aae0 transparent;}
50%{border-color: transparent transparent #1274b6 transparent;}
62.5%{border-color: transparent transparent #167bbf transparent;}
75%{border-color: transparent transparent #1b82c8 transparent;}
87.5%{border-color: transparent transparent #228bd2 transparent;}
100%{border-color: transparent transparent #2992d9 transparent;}
}

@keyframes animacolorfei
{
0%{border-color: transparent transparent #3498db transparent;}
12.5%{border-color: transparent transparent #3f9edd transparent;}
25%{border-color: transparent transparent #48a2de transparent;}
37.5%{border-color: transparent transparent #59aae0 transparent;}
50%{border-color: transparent transparent #1274b6 transparent;}
62.5%{border-color: transparent transparent #167bbf transparent;}
75%{border-color: transparent transparent #1b82c8 transparent;}
87.5%{border-color: transparent transparent #228bd2 transparent;}
100%{border-color: transparent transparent #2992d9 transparent;}
}

@-webkit-keyframes animacolorsei
{
0%{border-color: transparent transparent #3f9edd transparent;}
12.5%{border-color: transparent transparent #48a2de transparent;}
25%{border-color: transparent transparent #59aae0 transparent;}
37.5%{border-color: transparent transparent #1274b6 transparent;}
50%{border-color: transparent transparent #167bbf transparent;}
62.5%{border-color: transparent transparent #1b82c8 transparent;}
75%{border-color: transparent transparent #228bd2 transparent;}
87.5%{border-color: transparent transparent #2992d9 transparent;}
100%{border-color: transparent transparent #3498db transparent;}
}

@keyframes animacolorsei
{
0%{border-color: transparent transparent #3f9edd transparent;}
12.5%{border-color: transparent transparent #48a2de transparent;}
25%{border-color: transparent transparent #59aae0 transparent;}
37.5%{border-color: transparent transparent #1274b6 transparent;}
50%{border-color: transparent transparent #167bbf transparent;}
62.5%{border-color: transparent transparent #1b82c8 transparent;}
75%{border-color: transparent transparent #228bd2 transparent;}
87.5%{border-color: transparent transparent #2992d9 transparent;}
100%{border-color: transparent transparent #3498db transparent;}
}

@-webkit-keyframes animacolorseiz
{
0%{border-color: transparent transparent #48a2de transparent;}
12.5%{border-color: transparent transparent #59aae0 transparent;}
25%{border-color: transparent transparent #1274b6 transparent;}
37.5%{border-color: transparent transparent #167bbf transparent;}
50%{border-color: transparent transparent #1b82c8 transparent;}
62.5%{border-color: transparent transparent #228bd2 transparent;}
75%{border-color: transparent transparent #2992d9 transparent;}
87.5%{border-color: transparent transparent #3498db transparent;}
100%{border-color: transparent transparent #3f9edd transparent;}
}

@keyframes animacolorseiz
{
0%{border-color: transparent transparent #48a2de transparent;}
12.5%{border-color: transparent transparent #59aae0 transparent;}
25%{border-color: transparent transparent #1274b6 transparent;}
37.5%{border-color: transparent transparent #167bbf transparent;}
50%{border-color: transparent transparent #1b82c8 transparent;}
62.5%{border-color: transparent transparent #228bd2 transparent;}
75%{border-color: transparent transparent #2992d9 transparent;}
87.5%{border-color: transparent transparent #3498db transparent;}
100%{border-color: transparent transparent #3f9edd transparent;}
}

@-webkit-keyframes animacoloreiz
{
0%{border-color: transparent transparent #59aae0 transparent;}
12.5%{border-color: transparent transparent #1274b6 transparent;}
25%{border-color: transparent transparent #167bbf transparent;}
37.5%{border-color: transparent transparent #1b82c8 transparent;}
50%{border-color: transparent transparent #228bd2 transparent;}
62.5%{border-color: transparent transparent #2992d9 transparent;}
75%{border-color: transparent transparent #3498db transparent;}
87.5%{border-color: transparent transparent #3f9edd transparent;}
100%{border-color: transparent transparent #48a2de transparent;}
}

@keyframes animacoloreiz
{
0%{border-color: transparent transparent #59aae0 transparent;}
12.5%{border-color: transparent transparent #1274b6 transparent;}
25%{border-color: transparent transparent #167bbf transparent;}
37.5%{border-color: transparent transparent #1b82c8 transparent;}
50%{border-color: transparent transparent #228bd2 transparent;}
62.5%{border-color: transparent transparent #2992d9 transparent;}
75%{border-color: transparent transparent #3498db transparent;}
87.5%{border-color: transparent transparent #3f9edd transparent;}
100%{border-color: transparent transparent #48a2de transparent;}
}

@-webkit-keyframes animascale
{
0%{-webkit-transform: scale(1);}
100%{-webkit-transform: scale(1.2);}
}

@keyframes animascale
{
0%{-webkit-transform: scale(1);}
100%{-webkit-transform: scale(1.2);}
}

新建[Blogroot]\themes\butterfly\source\css\_load_style\wizard.styl

.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)
#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)

新建[Blogroot]\themes\butterfly\source\css\_load_style\image-fade-in-out.styl

@keyframes fade-in-out
  0%, 100%
    opacity 0
  50%
    opacity 1

.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)

#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
    width 100px  // Set the diameter to 100px将图像设置为圆形
    height 100px  // Set the diameter to 100px将图像设置为圆形
    border-radius 50%  // Make the image circular 将图像设为圆形
    animation fade-in-out 2s ease-in-out infinite // Adds a fade in/out effect渐入渐出效果

  &.loaded
    .load-image
      display none

新建[Blogroot]\themes\butterfly\source\css\_load_style\image-pulsing.styl

@keyframes pulse
  0%
    transform scale(1)
  50%
    transform scale(1.2)
  100%
    transform scale(1)

.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)

#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
    width 100px  // Set the diameter to 100px将图像设置为圆形
    height 100px  // Set the diameter to 100px将图像设置为圆形
    border-radius 50%  // Make the image circular 将图像设为圆形
    animation pulse 2s ease-in-out infinite // Adds a pulsing effect脉冲效果

  &.loaded
    .load-image
      display none

新建[Blogroot]\themes\butterfly\source\css\_load_style\image-Rotating.styl

@keyframes rotate-image
  0%
    transform rotate(0deg)
  100%
    transform rotate(360deg)

.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)

#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
    width 100px  // Set the diameter to 100px将图像设置为圆形
    height 100px  // Set the diameter to 100px将图像设置为圆形
    border-radius 50%  // Make the image circular 将图像设为圆形
    animation rotate-image 2s linear infinite // Adds continuous rotation旋转效果

  &.loaded
    .load-image
      display none

新建[Blogroot]\themes\butterfly\source\css\_load_style\doodle.styl

#loading-box
  position fixed
  z-index 1000
  width 100vw
  height 100vh
  margin 0
  background #270F34
  overflow hidden
  display flex
  align-items center
  justify-content center
  contain content
  overflow clip
  &.loaded
    z-index -1000
    css-doodle
      display none

新建[Blogroot]\themes\butterfly\source\css\_load_style\hyperspace.styl

#loading-box
  position fixed
  z-index 1000
  width 100vw
  height 100vh
  overflow hidden
  text-align center
  background rgba(236,236,236,0.95)
  text-align center
  &:before
    content ''
    display inline-block
    height 100%
    vertical-align middle
  &.loaded
    z-index -1000
    .space-scene
      display none
  .space-wall
    background url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/18515/PIA09959-1280x800_copy.jpg)
    background-size cover
    width 100%
    height 100%
    position absolute
    opacity 0
    animation space-fade 12s infinite linear
    animation-delay 0

  .space-scene
    display inline-block
    vertical-align middle
    perspective 5px
    perspective-origin 50% 50%
    position relative

  .space-wrap
    position absolute
    width 1000px
    height 1000px
    left -500px
    top -500px
    transform-style preserve-3d
    animation space-move 12s infinite linear
    animation-fill-mode forwards
    &:nth-child(2)
      animation space-move 12s infinite linear
      animation-delay 6s
      .space-wall
        animation-delay 6s

  .space-wall-right
    transform rotateY(90deg) translateZ(500px)

  .space-wall-left
    transform rotateY(-90deg) translateZ(500px)

  .space-wall-top
    transform rotateX(90deg) translateZ(500px)

  .space-wall-bottom
    transform rotateX(-90deg) translateZ(500px)

  .space-wall-back
    transform rotateX(180deg) translateZ(500px)



@keyframes space-move {
  0%{
    transform: translateZ(-500px) rotate(0deg);
  }
  100%{
    transform: translateZ(500px) rotate(0deg);
  }
}

@keyframes space-fade {
  0%{
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

五、修改layout.pug

修改[Blogroot]\themes\butterfly\layout\includes\layout.pug

butterfly_v3.6.0+

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

butterfly_v4.13.0及一周不用配置layout.pug里的if theme.preloader.enable，默认自带

六、修改var.styl

修改[Blogroot]\themes\butterfly\source\css\var.styl

添加自定义修改背景色的配置项。(按住 Ctrl + F 输入$preloader-bg快速查找进行替换)

      // 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

七、修改_config.butterfly.yml

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

找到preloader，相关内容使用以下内容覆盖

# Loading Animation (加載動畫)
preloader:
  enable: true
  load_color: '#000000' # '#37474f'
  load_style: hyperspace # default|gear|ironheart|scarecrow|triangles|wizard|image-fade-in-out|image-pulsing|image-Rotating|doodle|hyperspace
  load_image: /img/avatar-camel.webp # url

【配置项参数说明】：

enable：控制加载动画的开关，取值有true和false，true开启，false关闭。
load_color：该配置项为自定义加载动画背景颜色。默认值为#37474f,使用时注意用单引号’’包起来，不然会被识别成注释符。这个配置项最大的作用是配合load_image使用的图片的背景色，可以用取色器提取自定义图片的主要色调，以达到图片和背景融为一体的效果。
load_style：控制加载动画的样式，目前提供12种类型。

• default是主题原版的盒子加载动画
• gear是旋转齿轮加载动画
• ironheart是钢铁侠核心加载动画
• scarecrow是稻草人跳动加载动画
• triangles是旋转三角加载动画
• wizard是巫师施法加载动画
• image为自定义添加静态图片或gif作为加载动画，添加了width，height来限制尺寸，添加了border-radius 50%使输出图像为圆形，不需要可以删除。
• image-fade-in-out渐入渐出动画
• image-pulsing脉冲动画
• image-Rotating旋转动画
• doodle彩绘心形
• hyperspace星际穿越

load_image：该配置项的生效前提是load_style设置为image,内容填写图床链接或者本地相对地址。

八、夜间模式匹配(非必要)

此项为非必要修改项，主要是为了避免使用image主题的加载动画时，切换夜间模式后，背景色被强制覆盖为黑色，。（说白了就是治疗强迫症）

修改[Blogroot]\themes\butterfly\source\css\_mode\darkmode.styl

第10行的 --preloader-bg: darken(#121212, 2)

    --search-input-color: alpha(#FFFFFF, .7)
    --search-result-title: alpha(#FFFFFF, .9)
-   --preloader-bg: darken(#121212, 2)
+   --preloader-bg: darken(#ca3b3e, -2)
    --preloader-color: alpha(#FFFFFF, .7)
    --tab-border-color: #2c2c2c

其中#ca3b3e是设置为image主题时，切换为夜间模式后，自定义图片的背景色值。（切换夜间模式时，整个页面会降低色调，所以连带着自定义图片的色值也变暗，需要重新取值。）

其他更进一步的请查考店长教程

hexo-butterfly一图流教程

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