Butterfly美化-Loading Animation

此文章转载自Akilarの糖果屋

魔改步骤

1. 修改[Blogroot]\themes\butterfly\layout\includes\loading\loading.pug，本教程算上默认的旋转盒子加载动画，一共提供7种款式，读者可以根据代码结构自行改写移除不需要的内容。

   if theme.preloader.enable
     case theme.preloader.load_style    
       when 'wizard'
         include ./load_style/wizard.pug
       when 'image'
         include ./load_style/image.pug
       default
         include ./load_style/default.pug

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

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

   • default
   • image
   • wizard

   新建[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\image.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\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

3. 修改[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
       @import './_load_style/default'

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

4. 新建动画样式模板存放的文件夹，如无特别提示，所有动画样式均存放在[Blogroot]\themes\butterfly\source\css\_load-style\目录下
   • default
   • image
   • wizard

   新建[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\image.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
   
     .load-image
       position fixed
       z-index 1001
       display flex
   
     &.loaded
       .load-image
         display none

   新建[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)

5. 修改[Blogroot]\themes\butterfly\layout\includes\layout.pug，以适配接下来需要添加的配置项。
   • butterfly_v3.0.0-v3.5.1

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

   • butterfly_v3.6.0+

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

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

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

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

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

   配置项参数说明：

   1. enable：控制加载动画的开关，取值有true和false，true开启，false关闭。
   2. load_color：该配置项为自定义加载动画背景颜色。默认值为#37474f,使用时注意用’’包起来，不然会被识别成注释符。
      这个配置项最大的作用是配合load_image使用的图片的背景色，可以用取色器提取自定义图片的主要色调，以达到图片和背景融为一体的效果。
   3. load_style：控制加载动画的样式，目前提供七种类型。预览见步骤2。
      • default 是主题原版的盒子加载动画
      • wizard 是巫师施法加载动画
      • image 为自定义添加静态图片或gif作为加载动画。
   4. load_image：该配置项的生效前提是load_style设置为image,内容填写图床链接或者本地相对地址。

   熟悉魔改思路以后可以自定义添加更多更多样式，按照本教程的思路，在编译时只会加载选择的加载动画的对应样式，所以不用担心资源占用过多的问题。

8. 此项为非必要修改项，主要是为了避免使用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主题时，切换为夜间模式后，自定义图片的背景色值。（切换夜间模式时，整个页面会降低色调，所以连带着自定义图片的色值也变暗，需要重新取值。）

补充内容

很多同学表示添加了加载动画以后加载半天，只能看动画却进不了站。这点主要是因为加载动画的关闭与否是与网站加载状态的load的返回值决定的，而网站加载完成与否这个概念是很暧昧的，如果加装了pwa，清空缓存后再次加载的内容可能比想象的要多。以下提供两种方案，一个超时自动结束，一个手动点击结束。两者兼容，你可以同时使用达到多重保险。

• 超时自动结束
• 手动点击结束

可以给加载动画设置一个settimeout()的函数来达到伪·加载完毕的效果，即超时了自动关闭加载动画，即使页面还在加载。
得益于loading-js使用的是原生js，所以可以给script添加async属性实现异步加载，以免阻塞后续HTML渲染。
仅仅需要给控制加载动画开关的loading-js.pug添加两行代码即可。

-   script.
+   script(async).
      var preloader = {
        endLoading: () => {
          document.body.style.overflow = 'auto';
          document.getElementById('loading-box').classList.add("loaded")
        },
        initLoading: () => {
          document.body.style.overflow = '';
          document.getElementById('loading-box').classList.remove("loaded")

        }
      }
      window.addEventListener('load',()=> {preloader.endLoading()})
+     setTimeout(function(){preloader.endLoading();}, 5000);

给整个loading-box添加一个点击动作，点击动画就能结束。
同样是修改[Blogroot]\themes\butterfly\layout\includes\loading\loading-js.pug

-   script.
+   script(async).
      var preloader = {
        endLoading: () => {
          document.body.style.overflow = 'auto';
          document.getElementById('loading-box').classList.add("loaded")
        },
        initLoading: () => {
          document.body.style.overflow = '';
          document.getElementById('loading-box').classList.remove("loaded")

        }
      }
      window.addEventListener('load',()=> {preloader.endLoading()})
+     document.getElementById('loading-box').addEventListener('click',()=> {preloader.endLoading()})

自制加载动画思路分享

理论上你可以任意更改加载动画的内容，放置gif，放置静态图片，添加html，甚至是放置一个html5小游戏，只要是能够写在静态页面里的内容，都可以放在这里。当然，过于复杂的加载动画肯定是要牺牲掉网页加载速度的。

点击查看DIY动画思路

1. 首先我们必须了解加载动画涉及到哪几个文件的修改。
   • [Blogroot]\themes\butterfly\layout\includes\layout.pug
     这个负责读取配置文件中关于preloader的true or false 取值来确定是否加载loading-box。
   • [Blogroot]\themes\butterfly\source\css\_layout\loading.styl
     这个控制加载动画的样式，这里我的建议是尽量不要动它原有的内容，相反还能利用它已有的样式添加动态帷幕背景。也就是加载完成后背景向两边拉开的特效。
   • [Blogroot]\themes\butterfly\layout\includes\loading\loading-js.pug
     这个会根据页面的加载完成事件给loading-box下的元素添加一个loaded的class，可以利用它来控制页面加载完成后，加载动画内元素的隐藏。
   • [Blogroot]\themes\butterfly\layout\includes\loading\loading.pug
     加载动画布局的主要内容。需要用到pug语法。不懂的可以直接利用在线网站将html转为pug。
     html to pug互转在线网站。
2. 如示例一样，如果想要保留背景拉开帷幕的效果，我们可以保留loading.pug的前三行，在第四行与.loading-right-bg保持相同缩进来添加新的页面元素。
3. 样式既可以修改loading.styl，也可以直接引入相应的css文件。
   之后，为了保证加载完成，我们需要给自己添加的元素新增一个隐藏的属性。
   例如示例中，巫师动画的顶层元素是.wizard-scene，所以需要添加

   #loading-box.loaded .wizard-scene{
     display: none;
   }

   个别情况可能会遇到画布三维层级混乱，就需要定义loading-box的z-index属性。

   /* 加载前 */
   #loading-box {
     position: fixed;
     z-index: 1000;
    }
     /* 此处设为1000是因为loading.styl中给loading-bg定义的z-index:就是1000 */
   
     /* 加载后 */
   #loading-box.loaded{
     z-index: -1000;
   }

DIY加载动画具体实例

1. 首先我们需要找到心仪的加载动画，一般是以纯css动画为最佳，这样可以尽可能减少不必要的依赖加载。毕竟我们的最终目的不是让读者一直欣赏我们的加载动画。应该……不是吧？
   推荐到codepen上寻找心仪的加载动画项目。作为开源项目分享站，也能避免你卷入版权纠纷
2. 此处我以Hologram shooter这个项目为例。具体演示如何将其制作成加载动画。
3. 首先我们找到项目右下角的Export按钮，将其导出。
   
4. 之后得到的压缩包解压后结构如下，我们需要用到的是dist目录下已经编译为静态页面的文件。

   hologram-shooter
     |__dist
       |__index.html
       |__script.js
     |__src
       |__index.html
       |__script.vue
     |__license.txt
     |__README.markdown

5. 其中dist目录下的index.html内容如下,提取其中body部分的内容，使用html to pug互转在线网站。将其转为pug代码。
   • HTML
   • PUG

   <!DOCTYPE html>
   <html lang="en" >
   <head>
     <meta charset="UTF-8">
     <title>CodePen - Hologram shooter</title>
     <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
   </head>
   <body>
     <div id="app"></div>
     <script type="module">
       import CodePenVueComponent from "./script.js";
       new Vue(CodePenVueComponent).$mount('#app');
     </script>
   </body>
   </html>

   此时按照前文所述，我们新建
   [Blogroot]\themes\butterfly\layout\includes\loading\load_style\hologram.pug,
   注意此处因为我们需要的是加载动画，相当于把原项目的body容器替换成了加载动画盒子容器。由此可得最终结构（注意如果有涉及文件路径的，改成自己的相对路径：
   

   #loading-box
     #app
     script(type='module').
       import CodePenVueComponent from "/js/script.js";
       new Vue(CodePenVueComponent).$mount('#app');

6. 然后我们还要添加一个styl文件来控制具体的显隐样式，确保加载完成后，这个动画页面会老老实实的消失而不是一直在那无限施法。新建
   [Blogroot]\themes\butterfly\source\css\_load_style\hologram.styl，其中#loading-box的样式可以参考你选择的项目中定义给body的样式。.loaded和.app的样式是为了保证加载完成后，加载动画的容器会“沉到”最底层，且加载动画容器内的动画内容直接隐藏，这样就不会遮挡正文内容。

   #loading-box
     position fixed
     z-index 1000
     width 100vw
     height 100vh
     overflow hidden
     text-align center
     background var(--preloader-bg)
     &.loaded
       z-index -1000
       .app
         display none

7. 剩下的就简单了，分别在
   [Blogroot]\themes\butterfly\layout\includes\loading\loading.pug和[Blogroot]\themes\butterfly\source\css\_layout\loading.styl中添加新的选项，然后在[Blogroot]\_config.butterfly.yml的inject配置项按照原项目的依赖要求引入依赖即可。
   • 修改[Blogroot]\themes\butterfly\layout\includes\loading\loading.pug

       if theme.preloader.enable
      case theme.preloader.load_style
        when 'wizard'
          include ./load_style/wizard.pug
        when 'image'
          include ./load_style/image.pug
     +  when 'hologram'
     +    include ./load_style/hologram.pug
        default
          include ./load_style/default.pug

   • 修改[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') == 'hologram'
     +     @import './_load_style/hologram'
        else
           @import './_load_style/default'

   • 修改[Blogroot]\_config.butterfly.yml的inject配置项，添加必要依赖（此处是因为我用的示例需要这些依赖，具体的要按照你自己最终选择的项目来添加）,注意此处的引入不要添加异步加载，因为加载动画理论上要早于全部网页内容加载。加载顺序需要保持最高优先级。这也是我一再建议选择纯CSS项目的原因，否则你的加载动画比网页正文加载还慢，那就得不偿失了。

     inject:
       head:
        - <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
       bottom:
        - <script src="/js/script.js"></script> 

福利

此版块用于答复评论区留言的加载动画修改。鉴于上述教程的加载动画装配中，主要内容是对原项目的改动。所以以下只会写改好的动画的pug文件和styl文件内容。至于在loading.pug和loading.styl里注册引入文件的步骤我不再重复。记得自行添加。

• spincat（旋转猫猫）
• pokeball（神奇宝贝球）
• Hyperspace（星际穿越）
• float heart（彩绘心型）

1. 预览效果参考原项目：Cat loader

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

   #loading-box
     .cat__scene
       .cat__main
        .cat__body
        .cat__body
        .cat__tail
        .cat__head

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

   #loading-box
     position fixed
     z-index 1000
     width 100vw
     height 100vh
     overflow hidden
     text-align center
     display: flex;
     flex-direction: column;
     min-height: 100%;
     margin: 0;
     line-height: 1.4;
     &.loaded
       z-index -1000
       .cat__scene
         display none
     .cat__scene
       display flex
       flex 1
       flex-direction column
       justify-content flex-start
       justify-content center
       align-items center
       background-color #e6dcdc
   
       .cat__main
         position relative
         width 100%
         max-width 20em
         overflow hidden
         background-color #e6dcdc
         &::before
           content ""
           display block
           padding-bottom 100%
         &:hover
           & > *
             -webkit-animation-play-state paused
             animation-play-state paused
         &:active
           & > *
             -webkit-animation-play-state running
             animation-play-state running
   
       .cat__body, .cat__tail, .cat__head
         position absolute
         top 0
         left 0
         right 0
         bottom 0
         -webkit-animation cat__rotating 2.79s cubic-bezier(0.65, 0.54, 0.12, 0.93) infinite
         animation cat__rotating 2.79s cubic-bezier(0.65, 0.54, 0.12, 0.93) infinite
   
       .cat__body::before, .cat__tail::before, .cat__head::before
         content ""
         position absolute
         width 50%
         height 50%
         background-size 200%
         background-repeat no-repeat
         background-image url("https://images.weserv.nl/?url=i.imgur.com/M1raXX3.png&il")
   
       .cat__head
         &::before
           top 0
           right 0
           background-position 100% 0%
           transform-origin 0% 100%
           transform rotate(90deg)
   
       .cat__tail
         -webkit-animation-delay 0.2s
         animation-delay 0.2s
         &::before
           left 0
           bottom 0
           background-position 0% 100%
           transform-origin 100% 0%
           transform rotate(-30deg)
   
       .cat__body
         -webkit-animation-delay 0.1s
         animation-delay 0.1s
         &:nth-of-type(2)
           -webkit-animation-delay 0.2s
           animation-delay 0.2s
         &::before
           right 0
           bottom 0
           background-position 100% 100%
           transform-origin 0% 0%
   
   
   
   @-webkit-keyframes cat__rotating {
     from {
       transform: rotate(720deg);
     }
     to {
       transform: none;
     }
   }
   
   @keyframes cat__rotating {
     from {
       transform: rotate(720deg);
     }
     to {
       transform: none;
     }
   }

1. 预览效果参考原项目：pokeball loader

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

   #loading-box
     .pokeball-back
     .pokeball-loading
       .pokeball#pokeball-normal
       .pokeball#pokeball-great
       .pokeball#pokeball-ultra
       .pokeball#pokeball-master
       .pokeball#pokeball-safari

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

   #loading-box
     position fixed
     z-index 1000
     width 100vw
     height 100vh
     overflow hidden
     text-align center
     &.loaded
       z-index -1000
       .pokeball-loading
         display none
   
   @keyframes rotateBall {
     0% {
       transform: rotate(0deg);
     }
     100% {
       transform: rotate(360deg);
     }
   }
   @-webkit-keyframes rotateBall {
     0% {
       transform: rotate(0deg);
     }
     50% {
       transform: rotate(50deg);
     }
     0% {
       transform: rotate(360deg);
     }
   }
   .pokeball-back
     background: rgba(255,255,255,0.6)
     height: 100%
     width: 100%
   .pokeball-loading
     height 48px
     width 264px
     position absolute
     top 50%
     left 50%
     transform translateX(-50%) translateY(-50%)
   
   .pokeball
     width 4px
     height 4px
     transform-origin 24px 24px
     animation rotateBall 1.5s infinite forwards
   
   .pokeball#pokeball-normal
     box-shadow 16px 0 0 #000, 20px 0 0 #000, 24px 0 0 #000, 28px 0 0 #000, 8px 4px 0 #000, 12px 4px 0 #000, 16px 4px 0 #e20f07, 20px 4px 0 #e20f07, 24px 4px 0 #e20f07, 28px 4px 0 #e20f07, 32px 4px 0 #000, 36px 4px 0 #000, 4px 8px 0 #000, 8px 8px 0 #e20f07, 12px 8px 0 #e20f07, 16px 8px 0 #FFF, 20px 8px 0 #e20f07, 24px 8px 0 #e20f07, 28px 8px 0 #e20f07, 32px 8px 0 #e20f07, 36px 8px 0 #e20f07, 40px 8px 0 #000, 4px 12px 0 #000, 8px 12px 0 #e20f07, 12px 12px 0 #FFF, 16px 12px 0 #FFF, 20px 12px 0 #FFF, 24px 12px 0 #e20f07, 28px 12px 0 #e20f07, 32px 12px 0 #e20f07, 36px 12px 0 #e20f07, 40px 12px 0 #000, 0px 16px 0 #000, 4px 16px 0 #e20f07, 8px 16px 0 #e20f07, 12px 16px 0 #e20f07, 16px 16px 0 #FFF, 20px 16px 0 #e20f07, 24px 16px 0 #e20f07, 28px 16px 0 #e20f07, 32px 16px 0 #e20f07, 36px 16px 0 #e20f07, 40px 16px 0 #e20f07, 44px 16px 0 #000, 0px 20px 0 #000, 4px 20px 0 #e20f07, 8px 20px 0 #e20f07, 12px 20px 0 #e20f07, 16px 20px 0 #e20f07, 20px 20px 0 #000, 24px 20px 0 #000, 28px 20px 0 #e20f07, 32px 20px 0 #e20f07, 36px 20px 0 #e20f07, 40px 20px 0 #e20f07, 44px 20px 0 #000, 0px 24px 0 #000, 4px 24px 0 #000, 8px 24px 0 #e20f07, 12px 24px 0 #e20f07, 16px 24px 0 #000, 20px 24px 0 #FFF, 24px 24px 0 #a5a5a5, 28px 24px 0 #000, 32px 24px 0 #e20f07, 36px 24px 0 #e20f07, 40px 24px 0 #000, 44px 24px 0 #000, 0px 28px 0 #000, 4px 28px 0 #FFF, 8px 28px 0 #000, 12px 28px 0 #000, 16px 28px 0 #000, 20px 28px 0 #a5a5a5, 24px 28px 0 #a5a5a5, 28px 28px 0 #000, 32px 28px 0 #000, 36px 28px 0 #000, 40px 28px 0 #a5a5a5, 44px 28px 0 #000, 4px 32px 0 #000, 8px 32px 0 #FFF, 12px 32px 0 #FFF, 16px 32px 0 #FFF, 20px 32px 0 #000, 24px 32px 0 #000, 28px 32px 0 #a5a5a5, 32px 32px 0 #a5a5a5, 36px 32px 0 #a5a5a5, 40px 32px 0 #000, 4px 36px 0 #000, 8px 36px 0 #a5a5a5, 12px 36px 0 #FFF, 16px 36px 0 #FFF, 20px 36px 0 #FFF, 24px 36px 0 #a5a5a5, 28px 36px 0 #a5a5a5, 32px 36px 0 #a5a5a5, 36px 36px 0 #a5a5a5, 40px 36px 0 #000, 8px 40px 0 #000, 12px 40px 0 #000, 16px 40px 0 #a5a5a5, 20px 40px 0 #a5a5a5, 24px 40px 0 #a5a5a5, 28px 40px 0 #a5a5a5, 32px 40px 0 #000, 36px 40px 0 #000, 16px 44px 0 #000, 20px 44px 0 #000, 24px 44px 0 #000, 28px 44px 0 #000
   
   .pokeball#pokeball-great
     animation-delay 0.25s
     margin -4px 0 0 54px
     box-shadow 16px 0 0 #000, 20px 0 0 #000, 24px 0 0 #000, 28px 0 0 #000, 8px 4px 0 #000, 12px 4px 0 #000, 16px 4px 0 #278de1, 20px 4px 0 #278de1, 24px 4px 0 #278de1, 28px 4px 0 #278de1, 32px 4px 0 #000, 36px 4px 0 #000, 4px 8px 0 #000, 8px 8px 0 #e20f07, 12px 8px 0 #e20f07, 16px 8px 0 #278de1, 20px 8px 0 #278de1, 24px 8px 0 #278de1, 28px 8px 0 #278de1, 32px 8px 0 #e20f07, 36px 8px 0 #e20f07, 40px 8px 0 #000, 4px 12px 0 #000, 8px 12px 0 #e20f07, 12px 12px 0 #e20f07, 16px 12px 0 #e20f07, 20px 12px 0 #278de1, 24px 12px 0 #278de1, 28px 12px 0 #e20f07, 32px 12px 0 #e20f07, 36px 12px 0 #e20f07, 40px 12px 0 #000, 0px 16px 0 #000, 4px 16px 0 #278de1, 8px 16px 0 #278de1, 12px 16px 0 #e20f07, 16px 16px 0 #e20f07, 20px 16px 0 #278de1, 24px 16px 0 #278de1, 28px 16px 0 #e20f07, 32px 16px 0 #e20f07, 36px 16px 0 #278de1, 40px 16px 0 #278de1, 44px 16px 0 #000, 0px 20px 0 #000, 4px 20px 0 #278de1, 8px 20px 0 #278de1, 12px 20px 0 #278de1, 16px 20px 0 #278de1, 20px 20px 0 #000, 24px 20px 0 #000, 28px 20px 0 #278de1, 32px 20px 0 #278de1, 36px 20px 0 #278de1, 40px 20px 0 #278de1, 44px 20px 0 #000, 0px 24px 0 #000, 4px 24px 0 #000, 8px 24px 0 #278de1, 12px 24px 0 #278de1, 16px 24px 0 #000, 20px 24px 0 #FFF, 24px 24px 0 #a5a5a5, 28px 24px 0 #000, 32px 24px 0 #278de1, 36px 24px 0 #278de1, 40px 24px 0 #000, 44px 24px 0 #000, 0px 28px 0 #000, 4px 28px 0 #FFF, 8px 28px 0 #000, 12px 28px 0 #000, 16px 28px 0 #000, 20px 28px 0 #a5a5a5, 24px 28px 0 #a5a5a5, 28px 28px 0 #000, 32px 28px 0 #000, 36px 28px 0 #000, 40px 28px 0 #a5a5a5, 44px 28px 0 #000, 4px 32px 0 #000, 8px 32px 0 #FFF, 12px 32px 0 #FFF, 16px 32px 0 #FFF, 20px 32px 0 #000, 24px 32px 0 #000, 28px 32px 0 #a5a5a5, 32px 32px 0 #a5a5a5, 36px 32px 0 #a5a5a5, 40px 32px 0 #000, 4px 36px 0 #000, 8px 36px 0 #a5a5a5, 12px 36px 0 #FFF, 16px 36px 0 #FFF, 20px 36px 0 #FFF, 24px 36px 0 #a5a5a5, 28px 36px 0 #a5a5a5, 32px 36px 0 #a5a5a5, 36px 36px 0 #a5a5a5, 40px 36px 0 #000, 8px 40px 0 #000, 12px 40px 0 #000, 16px 40px 0 #a5a5a5, 20px 40px 0 #a5a5a5, 24px 40px 0 #a5a5a5, 28px 40px 0 #a5a5a5, 32px 40px 0 #000, 36px 40px 0 #000, 16px 44px 0 #000, 20px 44px 0 #000, 24px 44px 0 #000, 28px 44px 0 #000
   
   .pokeball#pokeball-ultra
     animation-delay 0.5s
     margin -4px 0 0 108px
     box-shadow 16px 0 0 #000, 20px 0 0 #000, 24px 0 0 #000, 28px 0 0 #000, 8px 4px 0 #000, 12px 4px 0 #000, 16px 4px 0 #ffff00, 20px 4px 0 #ffff00, 24px 4px 0 #ffff00, 28px 4px 0 #ffff00, 32px 4px 0 #000, 36px 4px 0 #000, 4px 8px 0 #000, 8px 8px 0 #ffff00, 12px 8px 0 #ffff00, 16px 8px 0 #ffff00, 20px 8px 0 #ffff00, 24px 8px 0 #ffff00, 28px 8px 0 #ffff00, 32px 8px 0 #ffff00, 36px 8px 0 #ffff00, 40px 8px 0 #000, 4px 12px 0 #000, 8px 12px 0 #ffff00, 12px 12px 0 #ffff00, 16px 12px 0 #000, 20px 12px 0 #000, 24px 12px 0 #000, 28px 12px 0 #000, 32px 12px 0 #ffff00, 36px 12px 0 #ffff00, 40px 12px 0 #000, 0px 16px 0 #000, 4px 16px 0 #000, 8px 16px 0 #ffff00, 12px 16px 0 #ffff00, 16px 16px 0 #000, 20px 16px 0 #000, 24px 16px 0 #000, 28px 16px 0 #000, 32px 16px 0 #ffff00, 36px 16px 0 #ffff00, 40px 16px 0 #000, 44px 16px 0 #000, 0px 20px 0 #000, 4px 20px 0 #000, 8px 20px 0 #000, 12px 20px 0 #000, 16px 20px 0 #000, 20px 20px 0 #000, 24px 20px 0 #000, 28px 20px 0 #000, 32px 20px 0 #000, 36px 20px 0 #000, 40px 20px 0 #000, 44px 20px 0 #000, 0px 24px 0 #000, 4px 24px 0 #000, 8px 24px 0 #000, 12px 24px 0 #000, 16px 24px 0 #000, 20px 24px 0 #FFF, 24px 24px 0 #a5a5a5, 28px 24px 0 #000, 32px 24px 0 #000, 36px 24px 0 #000, 40px 24px 0 #000, 44px 24px 0 #000, 0px 28px 0 #000, 4px 28px 0 #FFF, 8px 28px 0 #000, 12px 28px 0 #000, 16px 28px 0 #000, 20px 28px 0 #a5a5a5, 24px 28px 0 #a5a5a5, 28px 28px 0 #000, 32px 28px 0 #000, 36px 28px 0 #000, 40px 28px 0 #a5a5a5, 44px 28px 0 #000, 4px 32px 0 #000, 8px 32px 0 #FFF, 12px 32px 0 #FFF, 16px 32px 0 #FFF, 20px 32px 0 #000, 24px 32px 0 #000, 28px 32px 0 #a5a5a5, 32px 32px 0 #a5a5a5, 36px 32px 0 #a5a5a5, 40px 32px 0 #000, 4px 36px 0 #000, 8px 36px 0 #a5a5a5, 12px 36px 0 #FFF, 16px 36px 0 #FFF, 20px 36px 0 #FFF, 24px 36px 0 #a5a5a5, 28px 36px 0 #a5a5a5, 32px 36px 0 #a5a5a5, 36px 36px 0 #a5a5a5, 40px 36px 0 #000, 8px 40px 0 #000, 12px 40px 0 #000, 16px 40px 0 #a5a5a5, 20px 40px 0 #a5a5a5, 24px 40px 0 #a5a5a5, 28px 40px 0 #a5a5a5, 32px 40px 0 #000, 36px 40px 0 #000, 16px 44px 0 #000, 20px 44px 0 #000, 24px 44px 0 #000, 28px 44px 0 #000
   
   .pokeball#pokeball-master
     animation-delay 0.75s
     margin -4px 0 0 162px
     box-shadow 16px 0 0 #000, 20px 0 0 #000, 24px 0 0 #000, 28px 0 0 #000, 8px 4px 0 #000, 12px 4px 0 #000, 16px 4px 0 #481a66, 20px 4px 0 #481a66, 24px 4px 0 #481a66, 28px 4px 0 #481a66, 32px 4px 0 #000, 36px 4px 0 #000, 4px 8px 0 #000, 8px 8px 0 #eb23aa, 12px 8px 0 #eb23aa, 16px 8px 0 #481a66, 20px 8px 0 #481a66, 24px 8px 0 #481a66, 28px 8px 0 #481a66, 32px 8px 0 #eb23aa, 36px 8px 0 #eb23aa, 40px 8px 0 #000, 4px 12px 0 #000, 8px 12px 0 #eb23aa, 12px 12px 0 #FFF, 16px 12px 0 #FFF, 20px 12px 0 #481a66, 24px 12px 0 #481a66, 28px 12px 0 #FFF, 32px 12px 0 #FFF, 36px 12px 0 #eb23aa, 40px 12px 0 #000, 0px 16px 0 #000, 4px 16px 0 #481a66, 8px 16px 0 #481a66, 12px 16px 0 #FFF, 16px 16px 0 #481a66, 20px 16px 0 #FFF, 24px 16px 0 #FFF, 28px 16px 0 #481a66, 32px 16px 0 #FFF, 36px 16px 0 #481a66, 40px 16px 0 #481a66, 44px 16px 0 #000, 0px 20px 0 #000, 4px 20px 0 #481a66, 8px 20px 0 #481a66, 12px 20px 0 #481a66, 16px 20px 0 #481a66, 20px 20px 0 #000, 24px 20px 0 #000, 28px 20px 0 #481a66, 32px 20px 0 #481a66, 36px 20px 0 #481a66, 40px 20px 0 #481a66, 44px 20px 0 #000, 0px 24px 0 #000, 4px 24px 0 #000, 8px 24px 0 #481a66, 12px 24px 0 #481a66, 16px 24px 0 #000, 20px 24px 0 #FFF, 24px 24px 0 #a5a5a5, 28px 24px 0 #000, 32px 24px 0 #481a66, 36px 24px 0 #481a66, 40px 24px 0 #000, 44px 24px 0 #000, 0px 28px 0 #000, 4px 28px 0 #FFF, 8px 28px 0 #000, 12px 28px 0 #000, 16px 28px 0 #000, 20px 28px 0 #a5a5a5, 24px 28px 0 #a5a5a5, 28px 28px 0 #000, 32px 28px 0 #000, 36px 28px 0 #000, 40px 28px 0 #a5a5a5, 44px 28px 0 #000, 4px 32px 0 #000, 8px 32px 0 #FFF, 12px 32px 0 #FFF, 16px 32px 0 #FFF, 20px 32px 0 #000, 24px 32px 0 #000, 28px 32px 0 #a5a5a5, 32px 32px 0 #a5a5a5, 36px 32px 0 #a5a5a5, 40px 32px 0 #000, 4px 36px 0 #000, 8px 36px 0 #a5a5a5, 12px 36px 0 #FFF, 16px 36px 0 #FFF, 20px 36px 0 #FFF, 24px 36px 0 #a5a5a5, 28px 36px 0 #a5a5a5, 32px 36px 0 #a5a5a5, 36px 36px 0 #a5a5a5, 40px 36px 0 #000, 8px 40px 0 #000, 12px 40px 0 #000, 16px 40px 0 #a5a5a5, 20px 40px 0 #a5a5a5, 24px 40px 0 #a5a5a5, 28px 40px 0 #a5a5a5, 32px 40px 0 #000, 36px 40px 0 #000, 16px 44px 0 #000, 20px 44px 0 #000, 24px 44px 0 #000, 28px 44px 0 #000
   
   .pokeball#pokeball-safari
     animation-delay 1s
     margin -4px 0 0 216px
     box-shadow 16px 0 0 #000, 20px 0 0 #000, 24px 0 0 #000, 28px 0 0 #000, 8px 4px 0 #000, 12px 4px 0 #000, 16px 4px 0 #9a4a01, 20px 4px 0 #9a4a01, 24px 4px 0 #606700, 28px 4px 0 #5fa300, 32px 4px 0 #000, 36px 4px 0 #000, 4px 8px 0 #000, 8px 8px 0 #606700, 12px 8px 0 #606700, 16px 8px 0 #606700, 20px 8px 0 #9a4a01, 24px 8px 0 #9a4a01, 28px 8px 0 #5fa300, 32px 8px 0 #606700, 36px 8px 0 #9a4a01, 40px 8px 0 #000, 4px 12px 0 #000, 8px 12px 0 #9a4a01, 12px 12px 0 #9a4a01, 16px 12px 0 #9a4a01, 20px 12px 0 #9a4a01, 24px 12px 0 #9a4a01, 28px 12px 0 #5fa300, 32px 12px 0 #606700, 36px 12px 0 #606700, 40px 12px 0 #000, 0px 16px 0 #000, 4px 16px 0 #5fa300, 8px 16px 0 #606700, 12px 16px 0 #5fa300, 16px 16px 0 #5fa300, 20px 16px 0 #606700, 24px 16px 0 #606700, 28px 16px 0 #606700, 32px 16px 0 #5fa300, 36px 16px 0 #9a4a01, 40px 16px 0 #9a4a01, 44px 16px 0 #000, 0px 20px 0 #000, 4px 20px 0 #5fa300, 8px 20px 0 #606700, 12px 20px 0 #5fa300, 16px 20px 0 #606700, 20px 20px 0 #000, 24px 20px 0 #000, 28px 20px 0 #606700, 32px 20px 0 #606700, 36px 20px 0 #5fa300, 40px 20px 0 #5fa300, 44px 20px 0 #000, 0px 24px 0 #000, 4px 24px 0 #000, 8px 24px 0 #606700, 12px 24px 0 #606700, 16px 24px 0 #000, 20px 24px 0 #FFF, 24px 24px 0 #a5a5a5, 28px 24px 0 #000, 32px 24px 0 #9a4a01, 36px 24px 0 #9a4a01, 40px 24px 0 #000, 44px 24px 0 #000, 0px 28px 0 #000, 4px 28px 0 #FFF, 8px 28px 0 #000, 12px 28px 0 #000, 16px 28px 0 #000, 20px 28px 0 #a5a5a5, 24px 28px 0 #a5a5a5, 28px 28px 0 #000, 32px 28px 0 #000, 36px 28px 0 #000, 40px 28px 0 #a5a5a5, 44px 28px 0 #000, 4px 32px 0 #000, 8px 32px 0 #FFF, 12px 32px 0 #FFF, 16px 32px 0 #FFF, 20px 32px 0 #000, 24px 32px 0 #000, 28px 32px 0 #a5a5a5, 32px 32px 0 #a5a5a5, 36px 32px 0 #a5a5a5, 40px 32px 0 #000, 4px 36px 0 #000, 8px 36px 0 #a5a5a5, 12px 36px 0 #FFF, 16px 36px 0 #FFF, 20px 36px 0 #FFF, 24px 36px 0 #a5a5a5, 28px 36px 0 #a5a5a5, 32px 36px 0 #a5a5a5, 36px 36px 0 #a5a5a5, 40px 36px 0 #000, 8px 40px 0 #000, 12px 40px 0 #000, 16px 40px 0 #a5a5a5, 20px 40px 0 #a5a5a5, 24px 40px 0 #a5a5a5, 28px 40px 0 #a5a5a5, 32px 40px 0 #000, 36px 40px 0 #000, 16px 44px 0 #000, 20px 44px 0 #000, 24px 44px 0 #000, 28px 44px 0 #000

1. 预览效果参考原项目：hyperspace

2. 新建[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

3. 新建[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;
     }
   }

1. 预览效果参考原项目：floating heart，此项目用到了doodle依赖，这个依赖js文件大概52KB左右，不算太大。可以接受。

2. 新建[Blogroot]\themes\butterfly\layout\includes\loading\load_style\doodle.pug,此处需要注意，实测发现若单纯靠gulp或其他压缩软件的压缩，由于用到了css-doodle来处理参数，直接压缩会出现样式失效的现象。考虑到是加载动画，每个页面都占一部分布局，单纯屏蔽不压缩会影响所有页面。推荐把下面style.层级下的内容也放到一个css文件里，通过CDN引入。以此来避免被压缩。

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

3. 新建[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

转载自Akilar的文章，本文仅为记录魔改过程