Windows 8预加载器(加载图标)使用HTML5和JavaScript无图像

发布时间：2020-12-13 20:58:35 所属栏目：Windows 来源：网络整理

导读：我注意到一个简单的事情，看着Windows 8屏幕的屏幕，有一个预加载器(或加载图标)是非常有趣的，它有一点重力/摆动效果。我想使用javascript和CSS复制相同的东西，但是我对javascript动画的理解并不多，所以想知道如果能给我一个方向，我可以找到类似的例子。

我注意到一个简单的事情，看着Windows 8屏幕的屏幕，有一个预加载器(或加载图标)是非常有趣的，它有一点重力/摆动效果。我想使用javascript和CSS复制相同的东西，但是我对javascript动画的理解并不多，所以想知道如果能给我一个方向，我可以找到类似的例子。您还可以通过提供类似动画的代码片段来帮助您。

任何帮助将不胜感激。

检查网站 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 …

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!