当前位置:Gxlcms > html代码 > 纯CSS打造忙碌光标_html/css_WEB-ITnose

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

时间:2021-07-01 10:21:17 帮助过:23人阅读

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

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

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

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

有兴趣的,可以复制下面的源码:

                            

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

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

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

人气教程排行