我注意到一個簡單的事情，同時看着Windows 8加載屏幕的屏幕，有一個preloader（或加載圖標），這是相當有趣的，它有一點重力/擺動效應。我想用javascript和css複製相同的內容，但我對javascript動畫沒有太多的瞭解，因此想知道是否可以給我一個方向，我可以找到類似的例子。您也可以通過提供具有類似動畫類型的代碼片段來提供幫助。Windows 8 preloader（加載圖標）使用HTML5和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 ...
這真的很酷的人，正是我所期待的！ thx :) – RynoRn 2012-11-09 12:54:52
@RynoRn不客氣！ – 2012-11-10 11:40:13
在涉及DOM操作的腳本執行期間，動畫GIF可能在單線程JavaScript環境中停頓，因此硬件啓用的CSS3動畫在我看來表現得更好。我更新了JSFiddle以消除無關的cssload.net生成的標記，方法是刪除子wInnerBall類div，然後將它們渲染爲：在僞元素CSS之後，刪除wBall ID並通過第n個子選擇器設計la Jan Rubio的代碼示例。 [鏈接]（http://jsfiddle.net/nPQNH/48/） – TaeKwonJoe 2013-05-24 00:23:38
不知道的JavaScript，但你可以從http://preloaders.net/en/search/windows8
下載，我不知道，但也許這就是你想要的東西：
<progress style="color: white;" class="win-medium win-ring"></progress>
我發現，你可以找到關於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頁面，沒有什麼，只是一個正常的加載欄。
對不起，我的英語不好。我來自阿根廷。
Metro上的某些樣式過程如'-ms-ring'和'html：-ms-lang（ar，dv，fa，he，ku-Arab，pa-Arab，prs，ps，sd-Arab，syr ，ug，ur，qps-plocm）'。他們只是爲了窗戶和窗戶來處理它們！ – 2013-01-19 17:58:28
這裏是我的純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); }
}
這是CSS3中另一個關於Modern UI ProgressRing動畫的內容。它基於已經提到的Jan Rubio的solution，並進行了一些調整（儘管如此，仍然需要調整）。
關注the live example或者使用下面的代碼，如果codepen不可用：
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（LESS，無前綴）
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; }
}
你有沒有檢查過這個http://james.padolsey.com/javascript/sonic-looping-loaders/ – coder 2012-04-28 16:03:33
謝謝@coder，我會通過這個嘗試去實現重力效應...... – manishekhawat 2012-04-28 16:10:03
朋友，如果你可以拿出問題的確切解決方案（創建Windows 8 metro樣式preloader），請分享... :) – manishekhawat 2012-04-28 16:10:11