我们经常会用到忙碌等待的情况,比如ajax等待回调,或者加载页面的时候,我们通常的做法就是放一张loading.gif图片,在那里转呀转。
以前是在pc上用,也没有觉得不妥,如今要在移动端用,问题就来了,以前呢,做前端,兼容各种浏览器,就够让人头疼了,现在还要兼容各种屏幕尺寸。
开始呢,是做了N张不同大小的gif图。用javascript去判断屏的大小,然后选择适当的gif图片,这样做的缺点是很显的,说多了都是泪。现在我要做的,就是
换成css3去实现这个效果。下面看效果图:
有兴趣的,可以复制下面的源码:
这里是为了方便演示,对浏览器的兼容省略了,实际项目中,我用js进行了封装,方便调用和控制。
本例只记录一下原理,封装后的代码就不贴了。下面发一张应用中的效果裁图。
css3能做的还有很多,以后慢慢分享。