Windows 8预加载器（加载图标）使用HTML5和javascript没有图像 [英] Windows 8 preloader (loading icon) using HTML5 and javascript without images

问题描述

我注意到一个简单的事情，看着Windows 8加载屏幕的屏幕，有一个预加载器（或加载图标），这是相当有趣，它有一点重力/摇摆效果。我想使用javascript和CSS复制同样的，但我对javascript动画没有太多的理解，因此想知道如果你能给我一个方向，我可以找到类似的例子。您也可以通过提供具有类似动画的代码片段来帮助。

I noticed a simple thing while looking at the screen of Windows 8 loading screen, there is a preloader (or loading icon) which is quite interesting, it has a bit of gravity/swing effect. I wanted to replicate the same using javascript and css but I don't have much understanding of javascript animations, thus wanted to know if you can give me a direction to head, where I can find similar kind of example. You could also help by providing a snippet of code which has similar kind of animation.

任何帮助将不胜感激。

Any help would be appreciated.

推荐答案

检查网站 CSSload 。在这里你可以使你的CSS加载器在几秒钟。我使用Windows 8加载器，因此您可以在此处查看。

Check website CSSload. Here you can make your CSS loader in few seconds. I've made Windows 8 loader, so you can see it 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);
   }
}

或者，尝试此代码示例 ...

这篇关于Windows 8预加载器（加载图标）使用HTML5和javascript没有图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！