通常制作Loading动画都是利用GIF图片来完成的。
强大的CSS3其实也可以产生同样的效果。
注意:使用了一些对于CSS3的支持度的区别,基于Web-kit的浏览器才能完整的实现效果。(Chrome和Safari)
详细地址:http://webdesignersdesk.com/2010/05/create-ajax-loading-animation-with-css3/
其实主要就是利用了CSS3的动画功能。
主要分三步:
1.声明动画
-webkit-keyframes animation 即在不同的时间段(显示为百分比总时间)设置不同的对象属性
2.设置动画初始值。
如下列属性:
-webkit-animation-name: animation;
-webkit-animation-duration: 3s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: linear;
-webkit-transform:scale(0.8);
3.设置不同元素的动画起始时间
-webkit-animation-delay
搞定!