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

Question

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

免责声明：对于 SASS、COMPASS 或 CSS 中的动画，我完全是个新手。现在我已经解决了这个问题，我有 2 个问题：

1) 这个 link 与 Chrome 和 Edge 配合使用效果很好，但它不适用于 IE11。 为什么这不适用于 IE11？

2) 我通读了 CSS 部分以获得此 link 参考。我无法弄清楚 8 个动画平方是如何生成的。我了解动画关键帧部分。但我只是看不到实际正方形的声明位置。 How/where这是生成的吗？

* 已更新 * 我找到了问题 #1 的答案。我刚刚修改了 CSS 以支持 IE11（基本上所有说 -webkit- 我刚刚删除的内容。

供参考（也因为 codepen.io 引用 post 必须附带代码）：

@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

其实你看到的八个方块是方框阴影，看下面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 重新创建可汗学院的动画加载图标

Recreating Khan Academy's animated loading icon via CSS

css

sass

css-animations

compass-sass