使用HTML5和javascript(不带图像)的Windows 8预加载程序(加载图标)
我注意到一件简单的事情,当我看Windows8加载屏幕的时候,有一个预加载程序(或加载图标),这很有趣,它有一点重力/摆动效果。我想用javascript和css复制相同的动画,但是我对javascript动画没有太多的了解,因此我想知道你是否能给我一个方向,在那里我可以找到类似的例子。您还可以通过提供具有类似动画的代码片段来提供帮助使用HTML5和javascript(不带图像)的Windows 8预加载程序(加载图标),javascript,css,html,Javascript,Css,Html,我注意到一件简单的事情,当我看Windows8加载屏幕的时候,有一个预加载程序(或加载图标),这很有趣,它有一点重力/摆动效果。我想用javascript和css复制相同的动画,但是我对javascript动画没有太多的了解,因此我想知道你是否能给我一个方向,在那里我可以找到类似的例子。您还可以通过提供具有类似动画的代码片段来提供帮助 任何帮助都将不胜感激 不确定javascript,但您可以从下载它,我不确定,但可能这就是您想要的: <progress style="color: whi
任何帮助都将不胜感激 不确定javascript,但您可以从下载它,我不确定,但可能这就是您想要的:
<progress style="color: white;" class="win-medium win-ring"></progress>
查看网站。在这里,您可以在几秒钟内完成CSS加载程序。我制作了Windows8加载程序,所以你可以看到它
或者,试试…我发现你可以在
C:\Windows\WinStore\WinStore.css
和WinStore.htm
上找到一个类似的脚本,只要打开WinStore.htm
,你就会发现一个类似的环加载动画,由IE10
提供,只要有人可以从Windows Shell中转储动画信息。。。如果您使用记事本看到WinStore.css
,您将看到如下内容:
splashProgress::-ms-fill
{
animation-name: **-ms-ring**;
}
该变量是否是存储在Windows外壳中某处的动画信息
我测试了在Chrome和Firefox中加载HTML页面,没有什么,只是一个普通的加载条
对不起,我的英语不好。我来自阿根廷。这是我的纯CSS3实现,没有Javascript,我结合了最小标记和无id选择器的技术: HTML:
下面是CSS3中现代UI ProgressRing动画的另一个例子。它是基于已经提到的简·卢比奥(Jan Rubio)的,并进行了一些调整(尽管仍需要调整) 如果代码笔不可用,请观看或使用以下代码: HTML
你已经检查过这一个了吗?现在我可以找到这两个,你可以从这里开始:谢谢@coder,我将通过这一点,并将尝试实现重力效应…这一个使用CSS3检查我的答案!我更新它。。。现在,您可以创建预加载只使用CSS与简单的工具:)这真的很酷的人,正是我所寻找的!thx:)在涉及DOM操作的脚本执行过程中,动画GIF可能会在单线程Javascript环境中暂停,因此在我看来,支持硬件的CSS3动画的性能要好得多。我更新了您的JSFIDLE以消除无关的cssload.net生成的标记,方法是删除子WinneBall类div,而是使用:after伪元素CSS呈现它们,删除wBall ID,并使用n个子选择器对它们进行样式化la Jan Rubio的codepen示例。CSS动画也不会像8位透明GIF一样被难看的哑光颜色所困扰。@TaeKwonJoe,你说得对!但我对你们分享的正确例子有疑问。只有一个动画点。我看不到其他人。感谢您分享更好的解决方案!:)@Vukaš在哪种浏览器中只显示一个点?我刚刚用Firefox 12.0、Chrome 28.0.1500.52和IE 10.0.9200.16599进行了双重检查,所有5个点都正确渲染。Metro上处理的一些样式,如
-ms-ring
和html:-ms-lang(ar、dv、fa、he、ku-Arab、pa-Arab、prs、ps、sd-Arab、syr、ug、ur、qps-plocm)
。它们只适用于windows和windows处理它们!
splashProgress::-ms-fill
{
animation-name: **-ms-ring**;
}
<div class="loader">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
</div>
.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); }
}
<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>
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; }
}