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

前端之家收集整理的这篇文章主要介绍了Windows 8预加载器(加载图标)使用HTML5和JavaScript无图像前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我注意到一个简单的事情,看着Windows 8屏幕的屏幕,有一个预加载器(或加载图标)是非常有趣的,它有一点重力/摆动效果。我想使用javascript和CSS复制相同的东西,但是我对javascript动画的理解并不多,所以想知道如果能给我一个方向,我可以找到类似的例子。您还可以通过提供类似动画的代码片段来帮助您。

任何帮助将不胜感激。

检查网站 CSSload.这里您可以在几秒钟内使您的CSS加载程序。我做了Windows 8加载器,所以你可以看到它 here
  1. @keyframes orbit {
  2. 0% {
  3. opacity: 1;
  4. z-index:99;
  5. transform: rotate(180deg);
  6. animation-timing-function: ease-out;
  7. }
  8.  
  9. 7% {
  10. opacity: 1;
  11. transform: rotate(300deg);
  12. animation-timing-function: linear;
  13. origin:0%;
  14. }
  15.  
  16. 30% {
  17. opacity: 1;
  18. transform:rotate(410deg);
  19. animation-timing-function: ease-in-out;
  20. origin:7%;
  21. }
  22.  
  23. 39% {
  24. opacity: 1;
  25. transform: rotate(645deg);
  26. animation-timing-function: linear;
  27. origin:30%;
  28. }
  29.  
  30. 70% {
  31. opacity: 1;
  32. transform: rotate(770deg);
  33. animation-timing-function: ease-out;
  34. origin:39%;
  35. }
  36.  
  37. 75% {
  38. opacity: 1;
  39. transform: rotate(900deg);
  40. animation-timing-function: ease-out;
  41. origin:70%;
  42. }
  43.  
  44. 76% {
  45. opacity: 0;
  46. transform:rotate(900deg);
  47. }
  48.  
  49. 100% {
  50. opacity: 0;
  51. transform: rotate(900deg);
  52. }
  53. }

或者,尝试this code example

猜你在找的Windows相关文章