纯CSS打造忙碌光标_html/css_WEB-ITnose
程序员文章站
2022-06-15 15:22:01
...
我们经常会用到忙碌等待的情况,比如ajax等待回调,或者加载页面的时候,我们通常的做法就是放一张loading.gif图片,在那里转呀转。
以前是在pc上用,也没有觉得不妥,如今要在移动端用,问题就来了,以前呢,做前端,兼容各种浏览器,就够让人头疼了,现在还要兼容各种屏幕尺寸。
开始呢,是做了N张不同大小的gif图。用javascript去判断屏的大小,然后选择适当的gif图片,这样做的缺点是很显的,说多了都是泪。现在我要做的,就是
换成css3去实现这个效果。下面看效果图:
有兴趣的,可以复制下面的源码:
这里是为了方便演示,对浏览器的兼容省略了,实际项目中,我用js进行了封装,方便调用和控制。
本例只记录一下原理,封装后的代码就不贴了。下面发一张应用中的效果裁图。
css3能做的还有很多,以后慢慢分享。
上一篇: PHP的小技艺[转]
下一篇: PHP中读取文件的几个方法总结(推荐),
推荐阅读
-
纯CSS3实现图片展示特效_html/css_WEB-ITnose
-
一款纯css3实现的响应式导航_html/css_WEB-ITnose
-
一款简洁的纯css3代码实现的动画导航_html/css_WEB-ITnose
-
自学篇之js 提取复选框和单选框的值 和纯css的3D按钮_html/css_WEB-ITnose
-
一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose
-
纯CSS实现面包屑式导航_html/css_WEB-ITnose
-
纯CSS3实现动态火车行驶特效_html/css_WEB-ITnose
-
纯CSS3实现动态火车行驶特效_html/css_WEB-ITnose
-
纯CSS3实现漂亮的价格表样式代码_html/css_WEB-ITnose
-
纯CSS打造忙碌光标_html/css_WEB-ITnose