Windows 8预加载器（加载图标）使用HTML5和javascript没有图像

时间：2012-04-28 15:54:15

标签： javascript css html5

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

任何帮助将不胜感激。

6 个答案:

答案 0 :(得分：30)

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

答案 1 :(得分：9)

这是我的纯CSS3实现，没有Javascript，我将CSSload和Jan Rubio's codepen技术结合起来进行最小化标记，没有id选择器：

<强> HTML： 

<div class="loader">
   <div class="circle"></div>
   <div class="circle"></div>
   <div class="circle"></div>
   <div class="circle"></div>
   <div class="circle"></div>
</div>

<强> CSS： 

.loader { position: relative; width: 64px; height: 64px; }
.loader .circle { position: absolute; width: 61px; height: 61px; opacity: 0; -moz-transform: rotate(225deg); -moz-animation: orbit 7.15s infinite; -webkit-transform: rotate(225deg); -webkit-animation: orbit 7.15s infinite; -ms-transform: rotate(225deg); -ms-animation: orbit 7.15s infinite; -o-transform: rotate(225deg); -o-animation: orbit 7.15s infinite; transform: rotate(225deg); animation: orbit 7.15s infinite; }
.loader .circle:after { content:''; position: absolute; width: 8px; height: 8px; background: #04C5DE; left: 0px; top: 0px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; border-radius: 8px; }
.loader .circle:nth-child(1) { -moz-animation-delay: 1.56s; -webkit-animation-delay: 1.56s; -ms-animation-delay: 1.56s; -o-animation-delay: 1.56s; animation-delay: 1.56s; }
.loader .circle:nth-child(2) { -moz-animation-delay: 0.31s; -webkit-animation-delay: 0.31s; -ms-animation-delay: 0.31s; -o-animation-delay: 0.31s; animation-delay: 0.31s; }
.loader .circle:nth-child(3) { -moz-animation-delay: 0.62s; -webkit-animation-delay: 0.62s; -ms-animation-delay: 0.62s; -o-animation-delay: 0.62s; animation-delay: 0.62s; }
.loader .circle:nth-child(4) { -moz-animation-delay: 0.94s; -webkit-animation-delay: 0.94s; -ms-animation-delay: 0.94s; -o-animation-delay: 0.94s; animation-delay: 0.94s; }
.loader .circle:nth-child(5) { -moz-animation-delay: 1.25s; -webkit-animation-delay: 1.25s; -ms-animation-delay: 1.25s; -o-animation-delay: 1.25s; animation-delay: 1.25s; }

@-moz-keyframes orbit {
    0% { opacity: 1; z-index: 99; -moz-transform: rotate(180deg); -moz-animation-timing-function: ease-out; }
    7% { opacity: 1; -moz-transform: rotate(300deg); -moz-animation-timing-function: linear; -moz-origin: 0%; }
    30% { opacity: 1; -moz-transform: rotate(410deg); -moz-animation-timing-function: ease-in-out; -moz-origin: 7%; }
    39% { opacity: 1; -moz-transform: rotate(645deg); -moz-animation-timing-function: linear; -moz-origin: 30%; }
    70% { opacity: 1; -moz-transform: rotate(770deg); -moz-animation-timing-function: ease-out; -moz-origin: 39%; }
    75% { opacity: 1; -moz-transform: rotate(900deg); -moz-animation-timing-function: ease-out; -moz-origin: 70%; }
    76% { opacity: 0; -moz-transform: rotate(900deg); }
    100% { opacity: 0; -moz-transform: rotate(900deg); }
}

@-webkit-keyframes orbit {
    0% { opacity: 1; z-index: 99; -webkit-transform: rotate(180deg); -webkit-animation-timing-function: ease-out; }
    7% { opacity: 1; -webkit-transform: rotate(300deg); -webkit-animation-timing-function: linear; -webkit-origin: 0%; }
    30% { opacity: 1; -webkit-transform: rotate(410deg); -webkit-animation-timing-function: ease-in-out; -webkit-origin: 7%; }
    39% { opacity: 1; -webkit-transform: rotate(645deg); -webkit-animation-timing-function: linear; -webkit-origin: 30%; }
    70% { opacity: 1; -webkit-transform: rotate(770deg); -webkit-animation-timing-function: ease-out; -webkit-origin: 39%; }
    75% { opacity: 1; -webkit-transform: rotate(900deg); -webkit-animation-timing-function: ease-out; -webkit-origin: 70%; }
    76% { opacity: 0; -webkit-transform: rotate(900deg); }
    100% { opacity: 0; -webkit-transform: rotate(900deg); }
}

@-ms-keyframes orbit {
    0% { opacity: 1; z-index: 99; -ms-transform: rotate(180deg); -ms-animation-timing-function: ease-out; }
    7% { opacity: 1; -ms-transform: rotate(300deg); -ms-animation-timing-function: linear; -ms-origin: 0%; }
    30% { opacity: 1; -ms-transform: rotate(410deg); -ms-animation-timing-function: ease-in-out; -ms-origin: 7%; }
    39% { opacity: 1; -ms-transform: rotate(645deg); -ms-animation-timing-function: linear; -ms-origin: 30%; }
    70% { opacity: 1; -ms-transform: rotate(770deg); -ms-animation-timing-function: ease-out; -ms-origin: 39%; }
    75% { opacity: 1; -ms-transform: rotate(900deg); -ms-animation-timing-function: ease-out; -ms-origin: 70%; }
    76% { opacity: 0; -ms-transform: rotate(900deg); }
    100% { opacity: 0; -ms-transform: rotate(900deg); }
}

@-o-keyframes orbit {
    0% { opacity: 1; z-index: 99; -o-transform: rotate(180deg); -o-animation-timing-function: ease-out; }
    7% { opacity: 1; -o-transform: rotate(300deg); -o-animation-timing-function: linear; -o-origin: 0%; }
    30% { opacity: 1; -o-transform: rotate(410deg); -o-animation-timing-function: ease-in-out; -o-origin: 7%; }
    39% { opacity: 1; -o-transform: rotate(645deg); -o-animation-timing-function: linear; -o-origin: 30%; }
    70% { opacity: 1; -o-transform: rotate(770deg); -o-animation-timing-function: ease-out; -o-origin: 39%; }
    75% { opacity: 1; -o-transform: rotate(900deg); -o-animation-timing-function: ease-out; -o-origin: 70%; }
    76% { opacity: 0; -o-transform: rotate(900deg); }
    100% { opacity: 0; -o-transform: rotate(900deg); }
}

@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); }
}

答案 2 :(得分：7)

我不确定，但也许这就是你想要的：

<progress style="color: white;" class="win-medium win-ring"></progress>

答案 3 :(得分：6)

这是对CSS3中的Modern UI ProgressRing动画的另一种看法。它基于已经提到过的Jan Rubio的solution进行了一些调整（但仍需要调整）。

如果codepen不可用，请观看the live example或使用以下代码：

的 HTML 的

<div class='progress-ring'>
  <div class='progress-ring__wrap'>
    <div class='progress-ring__circle'></div>
  </div>
  <div class='progress-ring__wrap'>
    <div class='progress-ring__circle'></div>
  </div>
  <div class='progress-ring__wrap'>
    <div class='progress-ring__circle'></div>
  </div>
  <div class='progress-ring__wrap'>
    <div class='progress-ring__circle'></div>
  </div>
  <div class='progress-ring__wrap'>
    <div class='progress-ring__circle'></div>
  </div>
</div>

CSS（少见，没有前缀） 

body {background:#111}
@t:4000ms;
@d:40px;
@color:#ffffff;
.progress-ring {
  position: relative;
  padding-top: @d/5;
  width: @d;
  height: @d;
  margin: auto;

  .progress-ring__wrap {
    position: absolute;
      width: @d - 2;
      height: @d - 2;

    .progress-ring__circle {
      transform: rotate(225deg);
      animation-iteration-count: infinite;
      animation-name: orbit;
      animation-duration: @t;
      width: @d - 2;
      height: @d - 2;

      opacity: 0;

      &:after {
      content: '';
        position: absolute;
        width: @d/8;
        height: @d/8;
        border-radius: @d/8;
        box-shadow: 0px 0px 5% @color;
        background: @color; /* Pick a color */
      }
    }


    @r:-14deg;
    @m:30;
    &:nth-child(2) {
      transform:rotate(@r);
      .progress-ring__circle {  animation-delay: @t/@m; }
    }
    &:nth-child(3) {
      transform:rotate(@r*2);
      .progress-ring__circle {  animation-delay: @t/@m*2; }
    }
    &:nth-child(4) {
      transform:rotate(@r*3);
      .progress-ring__circle {  animation-delay: @t/@m*3; }
    }
    &:nth-child(5) {
      transform:rotate(@r*4);
      .progress-ring__circle {  animation-delay: @t/@m*4; }
    }
  }
}

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

  7%   { transform:rotate(345deg);
         animation-timing-function: linear; }

  35%   { transform:rotate(495deg);
          animation-timing-function: ease-in-out; }

  42%   { transform:rotate(690deg);
          animation-timing-function: linear; }

  70%   { transform:rotate(835deg); opacity: 1; 
         animation-timing-function: linear; }

  76% {opacity: 1;}

  77%   { transform:rotate(955deg);
         animation-timing-function: ease-in; }

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

答案 4 :(得分：1)

不确定javascript，但您可以从http://preloaders.net/en/search/windows8

下载

答案 5 :(得分：1)

我发现您可以在C:\Windows\WinStore\WinStore.css和WinStore.htm上找到类似的脚本，只需打开Winstore.htm，您就会发现IE10提供的类似环加载动画，如果只有有人可以从Windows Shell转储动画信息...如果您在记事本中看到WinStore.css，您会看到如下内容：

splashProgress::-ms-fill
{
    animation-name: **-ms-ring**;
}

该变量是否存储在Windows Shell中某处的动画信息

我测试了在Chrome和Firefox中加载HTML页面，没有，只是一个正常的加载栏。

抱歉我的英语不好。我来自阿根廷。

相关问题
最新问题