CSS实现Loading加载动画
浏览数：41 /
时间：2015年06月09日
优秀的前端工程师总是优先考虑用CSS替代图片：
效果图如上。这个动画并非GIF，而是纯CSS绘制，通过JavaScript定时器更新动画。
基本思路是创建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！
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
