开发记录

开发记录

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功能是否打开。下面的casewhen则是根据配置项的内容加载指定的页面元素。default表示默认使用butterfly自带的旋转盒子动画。

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

    新建[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\目录下

    新建[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.ymlpreloader配置项。

        # 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:控制加载动画的开关,取值有truefalsetrue开启,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
      这个负责读取配置文件中关于preloadertrue 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代码。
    <!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.ymlinject配置项,添加必要依赖(此处是因为我用的示例需要这些依赖,具体的要按照你自己最终选择的项目来添加),注意此处的引入不要添加异步加载,因为加载动画理论上要早于全部网页内容加载。加载顺序需要保持最高优先级。这也是我一再建议选择纯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里注册引入文件的步骤我不再重复。记得自行添加。

  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