Question

这是一个在线reference，可以重新创建Khan Academy的动画加载图标。

免责声明：对于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

其实你看到8个方块是盒子阴影，只需检查下面的CSS

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;
  }
}

通过CSS

1 个答案: