javascript - Windows 8 预加载器(加载图标)使用 HTML5 和没有图像的 javascript

Question

我在看 Windows 8 加载屏幕时注意到一个简单的事情，有一个预加载器(或加载图标)非常有趣，它有一点重力/摆动效果。我想使用 javascript 和 css 复制相同的东西，但我对 javascript 动画不太了解，因此想知道你是否可以给我一个方向，在那里我可以找到类似的例子。您还可以通过提供一段具有类似动画的代码来提供帮助。

如有任何帮助，我们将不胜感激。

Answer 1

查看网站 CSSload .在这里你可以在几秒钟内制作你的 CSS 加载器。我制作了 Windows 8 加载器，所以你可以看到它 here .

@keyframes orbit {
   0% {
      opacity: 1;
      z-index:99;
      transform: rotate(180deg);
      animation-timing-function: ease-out;
   }

   7% {
      opacity: 1;
      transform: rotate(300deg);
      animation-timing-function: linear;
      origin:0%;
   }

   30% {
      opacity: 1;
      transform:rotate(410deg);
      animation-timing-function: ease-in-out;
      origin:7%;
   }

   39% {
      opacity: 1;
      transform: rotate(645deg);
      animation-timing-function: linear;
      origin:30%;
   }

   70% {
      opacity: 1;
      transform: rotate(770deg);
      animation-timing-function: ease-out;
      origin:39%;
   }

   75% {
      opacity: 1;
      transform: rotate(900deg);
      animation-timing-function: ease-out;
      origin:70%;
   }

   76% {
      opacity: 0;
      transform:rotate(900deg);
   }

   100% {
      opacity: 0;
      transform: rotate(900deg);
   }
}

或者，尝试 this code example ...