纯CSS打造忙碌光标_html/css_WEB-ITnose

我们经常会用到忙碌等待的情况，比如ajax等待回调，或者加载页面的时候，我们通常的做法就是放一张loading.gif图片，在那里转呀转。

以前是在pc上用，也没有觉得不妥，如今要在移动端用，问题就来了，以前呢，做前端，兼容各种浏览器，就够让人头疼了，现在还要兼容各种屏幕尺寸。

开始呢，是做了N张不同大小的gif图。用javascript去判断屏的大小，然后选择适当的gif图片，这样做的缺点是很显的，说多了都是泪。现在我要做的，就是

换成css3去实现这个效果。下面看效果图：

有兴趣的，可以复制下面的源码：

这里是为了方便演示，对浏览器的兼容省略了，实际项目中，我用js进行了封装，方便调用和控制。

本例只记录一下原理，封装后的代码就不贴了。下面发一张应用中的效果裁图。

css3能做的还有很多，以后慢慢分享。