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