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

前端之家收集整理的这篇文章主要介绍了Windows 8预加载器(加载图标)使用HTML5和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

原文链接:https://www.f2er.com/windows/372510.html

猜你在找的Windows相关文章