我注意到一个简单的事情,看着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 …