CSS实现Loading加载动画
2016-03-04 01:11
561 查看
优秀的前端工程师总是优先考虑用CSS替代图片:
基本思路是创建8个圆形div,绝对定位排列成圆圈,然后,依次通过opacity属性更新透明度,就得到一个loading的效果图。
和GIF相比,CSS实现的好处主要在于,对于不同背景颜色,该动画都是完美的,还可以用CSS轻松实现阴影、发光等特效,而GIF虽然支持透明色,但创建时选择的背景色和实际背景色不一致会导致有明显的毛边,而且GIF不易动态更新,需要重新生成图片。
CSS方式完全可以通过包装成jQuery插件实现非常简单却异常强大的loading动画,缺点是IE不支持border-radius,所以IE下看到的是方块。
如果你不想自己写代码,这里有一个可视化在线生成CSS3 Loading动画的网站,相当强大:
http://fgnass.github.io/spin.js/
生成的代码除了在现代浏览器中正常工作外,还可以使用VML来兼容落后的IE浏览器,最低兼容到IE6!
相关文章推荐
- CSS学习(六)-css圆角边框高级效果、边框阴影效果(上)
- JAVA 反射笔记 Actionbar设置样式
- 如何给网页css样式起个好名字?
- CSS 设计彻底研究(四)盒子的浮动与定位
- html+css 图片右上角加删除叉,图片删除
- div的垂直居中
- CSS 设计彻底研究(三)深入理解盒子模型
- css样式表分类
- CSS+DIV实例
- CSS和JS标签style属性对照表
- css选择器
- CSS+DIV
- js获得样式兼容IE,FF等
- CSS中margin边界叠加问题及解决方案(1)
- HTML+CSS Day06 超链接的样式与搭配
- CSS中的浮动闭合问题,以及为了解决CSS中的浮动闭合所采用的清楚浮动的方法
- CSS布局模型
- 样式叠加不知道什么原因;
- css选择器优先级深入理解
- 详解CSS选择器、优先级与匹配原理