Loading Animation

开发记录

开发记录

2022-04-27:正式版v2.3

1. 新增涂鸦心型加载动画。

2022-04-25:正式版v2.2

1. 调整手动点击关闭的代码实现方式

2022-04-01:正式版v2.1

1. 新增神奇宝贝球加载动画
2. 新增星际穿越动画
3. 新增旋转猫猫加载动画
4. 调整动画淡入淡出逻辑

2022-02-16:正式版v2.0

1. 新增旋转齿轮动画
2. 新增旋转三角动画
3. 修改加载动画模板文件架构，更便于装配
4. 新增自制加载动画改写案例，手把手教你改动画。

2021-02-22:正式版v1.3

1. 新增钢铁之心加载动画
2. 新增哈尔的移动城堡稻草人加载动画

2021-01-31:正式版v1.2.1

1. 更新butterfly_v3.6.0适配方案

2020-11-22:正式版v1.2

1. 自选修改，删除夜间模式背景色覆盖以适配image主题加载动画。

2020-11-8:正式版v1.1

1. 新增直接使用gif图作为加载动画配置。
2. 支持自定义配置加载动画背景颜色。

2020-11-5:正式版v1.0

1. 成功实现多主题配置
2. css转为stylus，支持根据指定选项加载对应样式，节省资源。
3. 保留原版spinner-box加载动画，与自定义wizard动画并存。
4. 优化代码结构，可以根据教程示例和魔改思路，自行尝试添加自定义样式。

2020-11-5:内测版v0.02

1. 修改为pug模板。
2. 优化了css代码结构。

2020-11-4:内测版v0.01

1. 使用ejs模板
2. 直接替换源码。
3. 使用inject配置项来外挂css。

旧版教程，内容较旧，不推荐使用

魔改示例

1. 修改[Blogroot]\themes\butterfly\layout\includes\loading\loading.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

   这里我保留了原代码的前三行内容，这三行配合loading-js.pug控制加载动画的显隐和背景色的帷幕动画效果。

2. 在[Blogroot]\themes\butterfly\source\css\目录下新建loading_wizard.css文件

   @charset "UTF-8";
   #loading-box {
     position: fixed;
     z-index: 1000; /*初始调高loading-box层级在众网页元素之上*/
     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;
   }
   #loading-box.loaded{
     z-index: -1000; /*加载完成后把loading-box的三维层级调低，免得遮罩其他网页元素*/
   }
   .wizard-scene {
     position: fixed;
     z-index: 1001; /*巫师动画还要比loading-box层级高一点点*/
     display: -webkit-box;
     display: flex;
   }
   #loading-box.loaded .wizard-scene{
     display: none; /*加载完成后隐藏巫师动画*/
   }
   /** Wizard CSS & Animations */
   .wizard {
     position: relative;
     width: 190px;
     height: 240px;
   }
   
   .wizard-body {
     position: absolute;
     bottom: 0;
     left: 68px;
     height: 100px;
     width: 60px;
     background: #3f64ce;
   }
   .wizard-body::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;
     /** animation */
     -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;
   }
   .wizard-right-arm .right-hand {
     position: absolute;
     right: 8px;
     bottom: 8px;
     width: 30px;
     height: 30px;
     border-radius: 50%;
     background: #f1c5b4;
     /** animation */
     -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-arm .wizard-right-hand::after {
     content: "";
     position: absolute;
     right: 0px;
     top: -8px;
     width: 15px;
     height: 30px;
     border-radius: 10px;
     background: #f1c5b4;
     /** Animation */
     -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;
     /** animation */
     -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-arm .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;
   }
   .wizard-left-arm .wizard-left-hand::after {
     content: "";
     position: absolute;
     right: 0;
     top: 0;
     width: 30px;
     height: 15px;
     border-radius: 20px;
     background: #f1c5b4;
     /** Animation */
     -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;
     /** Animation */
     -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-head .wizard-beard {
     position: absolute;
     bottom: 0;
     left: 38px;
     height: 106px;
     width: 80px;
     border-bottom-right-radius: 55%;
     background: #ffffff;
   }
   .wizard-head .wizard-beard::after {
     content: "";
     position: absolute;
     top: 16px;
     left: -10px;
     width: 40px;
     height: 20px;
     border-radius: 20px;
     background: #ffffff;
   }
   .wizard-head .wizard-face {
     position: absolute;
     bottom: 76px;
     left: 38px;
     height: 30px;
     width: 60px;
     background: #f1c5b4;
   }
   .wizard-head .wizard-face::before {
     content: "";
     position: absolute;
     top: 0px;
     left: 40px;
     width: 20px;
     height: 40px;
     border-bottom-right-radius: 20px;
     border-bottom-left-radius: 20px;
     background: #f1c5b4;
   }
   .wizard-head .wizard-face::after {
     content: "";
     position: absolute;
     top: 16px;
     left: -10px;
     width: 50px;
     height: 20px;
     border-radius: 20px;
     border-bottom-right-radius: 0px;
     background: #ffffff;
   }
   .wizard-head .wizard-face .wizard-adds {
     /** Nose */
     position: absolute;
     top: 0px;
     left: -10px;
     width: 40px;
     height: 20px;
     border-radius: 20px;
     background: #f1c5b4;
   }
   .wizard-head .wizard-face .wizard-adds::after {
     /** Ear */
     content: "";
     position: absolute;
     top: 5px;
     left: 80px;
     width: 15px;
     height: 20px;
     border-bottom-right-radius: 20px;
     border-top-right-radius: 20px;
     background: #f1c5b4;
   }
   .wizard-head .wizard-hat {
     position: absolute;
     bottom: 106px;
     left: 0;
     width: 160px;
     height: 20px;
     border-radius: 20px;
     background: #3f64ce;
   }
   .wizard-head .wizard-hat::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;
   }
   .wizard-head .wizard-hat::after {
     content: "";
     position: absolute;
     top: 0;
     left: 0;
     width: 160px;
     height: 20px;
     background: #3f64ce;
     border-radius: 20px;
   }
   .wizard-head .wizard-hat .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;
   }
   .wizard-head .wizard-hat .wizard-hat-of-the-hat::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-head .wizard-hat .wizard-four-point-star {
     position: absolute;
     width: 12px;
     height: 12px;
   }
   .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%;
     /* 100% * √2 */
     top: 0;
     bottom: 0;
     border-radius: 10%;
     -webkit-transform: rotate(66.66deg) skewX(45deg);
             transform: rotate(66.66deg) skewX(45deg);
   }
   .wizard-head .wizard-hat .wizard-four-point-star::after {
     -webkit-transform: rotate(156.66deg) skew(45deg);
             transform: rotate(156.66deg) skew(45deg);
   }
   .wizard-head .wizard-hat .wizard-four-point-star.--first {
     bottom: 28px;
     left: 46px;
   }
   .wizard-head .wizard-hat .wizard-four-point-star.--second {
     bottom: 40px;
     left: 80px;
   }
   .wizard-head .wizard-hat .wizard-four-point-star.--third {
     bottom: 15px;
     left: 108px;
   }
   
   /** 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);
     }
   }
   /** Objects CSS & Animations */
   .wizard-objects {
     position: relative;
     width: 200px;
     height: 240px;
   }
   
   .wizard-square {
     position: absolute;
     bottom: -60px;
     left: -5px;
     width: 120px;
     height: 120px;
     border-radius: 50%;
     /** Animation */
     -webkit-transform: rotate(-360deg);
             transform: rotate(-360deg);
     -webkit-animation: path_square 10s ease-in-out infinite;
             animation: path_square 10s ease-in-out infinite;
   }
   .wizard-square::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%;
     /** Animation */
     -webkit-transform: rotate(-360deg);
             transform: rotate(-360deg);
     -webkit-animation: path_circle 10s ease-in-out infinite;
             animation: path_circle 10s ease-in-out infinite;
   }
   .wizard-circle::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%;
     /** Animation */
     -webkit-transform: rotate(-360deg);
             transform: rotate(-360deg);
     -webkit-animation: path_triangle 10s ease-in-out infinite;
             animation: path_triangle 10s ease-in-out infinite;
   }
   .wizard-triangle::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 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);
     }
   }

3. 修改[Blogroot]\_config.butterfly.yml中的配置项，

   • 确保你打开了preloader

     -    preloader: false
     +    preloader: true

   • 在inject: head:配置项中引入巫师加载动画的css样式

         inject:
           head:
     +       - <link rel="stylesheet" link="/css/loading_wizard.css"/>

4. 运行hexo clean && hexo generate && hexo server即可查看加载动画样式了。

5. bug归纳

   • 遮罩背景层缩入不完全，左边始终有半扇门的遮罩。
     检查[Blogroot]\themes\butterfly\source\css\_layout\loading.styl
     确保开头为以下内容

     if hexo-config('preloader')
       .loading-bg
         position: fixed
         z-index: 1000 /*这是遮罩背景的三维高度，请确保动画的三维高度大于它*/
         width: 50%
         height: 100%
         background-color: var(--preloader-bg)
     
       #loading-box
         .loading-left-bg
           @extend .loading-bg
           left: 0    /* 原代码中可能没有这项 */
         .loading-right-bg
           @extend .loading-bg
           right: 0

以下为新版教程，需要改动五个主题源码文件。
相比旧版教程，优势在于可以根据配置项内的指定选项加载对应样式。
不选的样式就不加载了，有效节省资源。
同时优化了代码结构，方便读者融会贯通以后，自行添加其他加载动画。
最新版内容支持自定义图片（png,jpg,gif均可）作为加载动画

魔改步骤

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

   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
       default
         include ./load_style/default.pug

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

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

   • default
   • gear
   • image
   • ironheart
   • scarecrow
   • triangles
   • 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\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，这是自定义图片加载动画，所以没有预览样式。具体配置见下文。
   

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

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
   • gear
   • image
   • ironheart
   • scarecrow
   • triangles
   • 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\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:
   

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

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，添加自定义修改背景色的配置项。(大概98行的位置)

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

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是主题原版的盒子加载动画
      • gear是旋转齿轮加载动画
      • ironheart是钢铁侠核心加载动画
      • scarecrow是稻草人跳动加载动画
      • triangles是旋转三角加载动画
      • 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主题时，切换为夜间模式后，自定义图片的背景色值。（切换夜间模式时，整个页面会降低色调，所以连带着自定义图片的色值也变暗，需要重新取值。）

补充内容

很多同学表示添加了加载动画以后加载半天，只能看动画却进不了站我的加载动画还被Heo说成是无限施法2333。这点主要是因为加载动画的关闭与否是与网站加载状态的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);

其中5000的单位是ms，代表你设置的最大容忍时间。可以自行修改。
这样一来，如果网站在五秒内加载完成，则优先执行window.addEventListener(‘load’,()=> {preloader.endLoading()}),如果超过5秒，则执行 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 '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 '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
   基于此项目原理，本站还拓展了一篇刀剑神域风格的登录动画，详情参看：SAO-UI-PLAN-LINK-START
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