使用CSS3构建Ajax加载动画
原文地址:http://webdesignersdesk.com/2010/05/create-ajax-loading-animation-with-css3/
译者:蒋宇捷
通常前端工程师采用gif动画图片来表现Ajax的加载。但是现在css3已经引入了动画属性,我们可以在不采用gif动画图片的情况下,采用css3达到同样的Ajax加载动画效果。那么让我们现在开始来实现想要的效果。
重要提示:只支持Webkit内核的浏览器(Safari和Chrome)
示例
HTML
在这里我们只展示demo里第一个Ajax载入示例的代码。首先我们需要一个名为“loading”的容器,以放置所有的动画元素。然后我们需要为每一列定义一个单独的div,并且统一定义一个class属性。
用CSS3设计动画
下面所有的代码都带有注释。
加载动画2和3的CSS代码
译者注:
现在我们有了四种实现HTML动画的方式:
1、GIF动画图片,优点方便,缺点是256色,背景不能完全透明,效果较差。
2、CSS3控制,缺点是只有在支持CSS3的浏览器上有效果、实现较复杂,优点是效果好,效率高。
3、Javascript实现,效果和CSS实现类似,效率不如原生CSS,但是可以跨浏览器支持。
4、HTML5 Canvas,实现较复杂,能实现更高级的效果。
posted on 2011-02-10 22:21 android开发实例 阅读(401) 评论(0) 编辑 收藏 举报