通过CSS重新创建可汗学院的动画加载图标

Question

这是一个在线reference，它重新创建可汗学院的动画加载图标。

免责声明：当谈到SASS，COMPASS或CSS中的动画时，我是一个完整的新手。 现在我明白了，我有两个问题：

1）该链接与Chrome和Edge非常好，但它不适用于IE11。 为什么这不适用于IE11？

2）我通过CSS链接参考阅读。我无法弄清楚如何生成8动画平方。我理解动画关键帧部分。但我只是看不到实际广场在哪里宣布。 这是怎么产生的？

*已更新* 我找到了问题1的答案。 我刚修改过的CSS支持IE11（基本上什么，说-webkit-我只是删除

供参考（还因为codepen.io引用后必须伴随码）：

@import "compass/css3"; 

$size: 30px; 
$border: 2px; 
$gray: #ddd; 

$color: #3498D0; 
$light: lighten($color, 10%); 
$lighter: lighten($color, 20%); 

body { 
    padding: 30px 30px; 
} 

.square { 
    position: relative; 
    width: $size; 
    height: $size; 
    background: $gray; 
    box-shadow: 0px $size + $border $gray, 
       0px ($size + $border) * 2 $gray, 
       $size + $border 0px $gray, 
       ($size + $border) * 2 0px $gray, 
       ($size + $border) * 2 $size + $border $gray, 
       ($size + $border) * 2 ($size + $border) * 2 $gray, 
       $size + $border ($size + $border) * 2 $gray 

    ; 
    -webkit-animation: loading 1s infinite ease-out; 
} 

@-webkit-keyframes loading { 
    0% { 
     background: $gray; 
    box-shadow: 0px $size + $border $color, 
       0px ($size + $border) * 2 $light, 
       $size + $border 0px $gray, 
       ($size + $border) * 2 0px $gray, 
       ($size + $border) * 2 $size + $border $gray, 
       ($size + $border) * 2 ($size + $border) * 2 $gray, 
       $size + $border ($size + $border) * 2 $lighter; 
    } 
    12.5% { 
    background: $color; 
    box-shadow: 0px $size + $border $light, 
       0px ($size + $border) * 2 $lighter, 
       $size + $border 0px $gray, 
       ($size + $border) * 2 0px $gray, 
       ($size + $border) * 2 $size + $border $gray, 
       ($size + $border) * 2 ($size + $border) * 2 $gray, 
       $size + $border ($size + $border) * 2 $gray; 
    } 
25% { 
    background: $light; 
    box-shadow: 0px $size + $border $lighter, 
       0px ($size + $border) * 2 $gray, 
       $size + $border 0px $color, 
       ($size + $border) * 2 0px $gray, 
       ($size + $border) * 2 $size + $border $gray, 
       ($size + $border) * 2 ($size + $border) * 2 $gray, 
       $size + $border ($size + $border) * 2 $gray; 
} 

37.5% { 
    background: $lighter; 
    box-shadow: 0px $size + $border $gray, 
       0px ($size + $border) * 2 $gray, 
       $size + $border 0px $light, 
       ($size + $border) * 2 0px $color, 
       ($size + $border) * 2 $size + $border $gray, 
       ($size + $border) * 2 ($size + $border) * 2 $gray, 
       $size + $border ($size + $border) * 2 $gray; 
} 

50% { 
    background: $gray; 
    box-shadow: 0px $size + $border $gray, 
       0px ($size + $border) * 2 $gray, 
       $size + $border 0px $lighter, 
       ($size + $border) * 2 0px $light, 
       ($size + $border) * 2 $size + $border $color, 
       ($size + $border) * 2 ($size + $border) * 2 $gray, 
       $size + $border ($size + $border) * 2 $gray; 
} 

62.5% { 
    background: $gray; 
    box-shadow: 0px $size + $border $gray, 
       0px ($size + $border) * 2 $gray, 
       $size + $border 0px $gray, 
       ($size + $border) * 2 0px $lighter, 
       ($size + $border) * 2 $size + $border $light, 
       ($size + $border) * 2 ($size + $border) * 2 $color, 
       $size + $border ($size + $border) * 2 $gray; 
} 

75% { 
    background: $gray; 
    box-shadow: 0px $size + $border $gray, 
       0px ($size + $border) * 2 $gray, 
       $size + $border 0px $gray, 
       ($size + $border) * 2 0px $gray, 
       ($size + $border) * 2 $size + $border $lighter, 
       ($size + $border) * 2 ($size + $border) * 2 $light, 
       $size + $border ($size + $border) * 2 $color; 
} 

87.5% { 
    background: $gray; 
    box-shadow: 0px $size + $border $gray, 
       0px ($size + $border) * 2 $color, 
       $size + $border 0px $gray, 
       ($size + $border) * 2 0px $gray, 
       ($size + $border) * 2 $size + $border $gray, 
       ($size + $border) * 2 ($size + $border) * 2 $lighter, 
       $size + $border ($size + $border) * 2 $light; 
} 

100% { 
    background: $gray; 
    box-shadow: 0px $size + $border $color, 
       0px ($size + $border) * 2 $light, 
       $size + $border 0px $gray, 
       ($size + $border) * 2 0px $gray, 
       ($size + $border) * 2 $size + $border $gray, 
       ($size + $border) * 2 ($size + $border) * 2 $gray, 
       $size + $border ($size + $border) * 2 $lighter; 
} 

}; 

Answer 1

其实你看到的八方形盒子是影子，只是检查以下

body { 
    padding: 10px 30px; 
} 

.square { 
    position: relative; 
    width: 30px; 
    height: 30px; 
    background: #ddd; 
    box-shadow: 0px 32px #ddd, 0px 64px #ddd, 32px 0px #ddd, 64px 0px #ddd, 64px 32px #ddd, 64px 64px #ddd, 32px 64px #ddd; 
    -webkit-animation: loading 1s infinite ease-out; 
} 

@-webkit-keyframes loading { 
    0% { 
    background: #ddd; 
    box-shadow: 0px 32px #3498D0, 0px 64px #5dadda, 32px 0px #ddd, 64px 0px #ddd, 64px 32px #ddd, 64px 64px #ddd, 32px 64px #87c2e3; 
    } 
    12.5% { 
    background: #3498D0; 
    box-shadow: 0px 32px #5dadda, 0px 64px #87c2e3, 32px 0px #ddd, 64px 0px #ddd, 64px 32px #ddd, 64px 64px #ddd, 32px 64px #ddd; 
    } 
    25% { 
    background: #5dadda; 
    box-shadow: 0px 32px #87c2e3, 0px 64px #ddd, 32px 0px #3498D0, 64px 0px #ddd, 64px 32px #ddd, 64px 64px #ddd, 32px 64px #ddd; 
    } 
    37.5% { 
    background: #87c2e3; 
    box-shadow: 0px 32px #ddd, 0px 64px #ddd, 32px 0px #5dadda, 64px 0px #3498D0, 64px 32px #ddd, 64px 64px #ddd, 32px 64px #ddd; 
    } 
    50% { 
    background: #ddd; 
    box-shadow: 0px 32px #ddd, 0px 64px #ddd, 32px 0px #87c2e3, 64px 0px #5dadda, 64px 32px #3498D0, 64px 64px #ddd, 32px 64px #ddd; 
    } 
    62.5% { 
    background: #ddd; 
    box-shadow: 0px 32px #ddd, 0px 64px #ddd, 32px 0px #ddd, 64px 0px #87c2e3, 64px 32px #5dadda, 64px 64px #3498D0, 32px 64px #ddd; 
    } 
    75% { 
    background: #ddd; 
    box-shadow: 0px 32px #ddd, 0px 64px #ddd, 32px 0px #ddd, 64px 0px #ddd, 64px 32px #87c2e3, 64px 64px #5dadda, 32px 64px #3498D0; 
    } 
    87.5% { 
    background: #ddd; 
    box-shadow: 0px 32px #ddd, 0px 64px #3498D0, 32px 0px #ddd, 64px 0px #ddd, 64px 32px #ddd, 64px 64px #87c2e3, 32px 64px #5dadda; 
    } 
    100% { 
    background: #ddd; 
    box-shadow: 0px 32px #3498D0, 0px 64px #5dadda, 32px 0px #ddd, 64px 0px #ddd, 64px 32px #ddd, 64px 64px #ddd, 32px 64px #87c2e3; 
    } 
}