以WebKit为核心的浏览器,例如Safari和Chrome,对html5有着很好的支持,在移动平台中这两个浏览器对应的就是IOS和Android。最近在开发一个移动平台的web app,那么就有机会利用css3去实现一些很酷的效果,这些效果原来更多的是利用图片来实现。最近的一个改进就是利用css3制作旋转加载动画。以下将分别介绍几种实现的方案。
方案1,图片辅助
传统做法是直接用动态的GIF图片,这个方案是用PNG图片加上背景颜色来模拟静止的加载图片,然后利用css中的animation处理图片的旋转。相比传统方案,这个方案的好处是可以直接通过修改CSS来改变背景色,可以修改大小和旋转速度。如下是具体的CSS代码:
具体效果查看这里:Demo1
这个方案,只有safari可以很好地支持。chrome下支持不是很好,所以这是一个不太成熟的方案。
方案2, 纯CSS实现
方案的思路是,首先用css渲染12个静态的bar,每个bar间隔30度的角度,给每个bar添加背景变淡的动画,但是相邻bar的动画效果延迟1/12秒,来保证12个bar是按顺序变亮然后变暗。从而模拟出旋转的效果。
这个旋转效果是伪旋转,所有的bar都没有真正做到旋转。
具体效果查看这里:Demo2
safari和chrome都能很好地渲染这个效果,并且也很容易定义实际大小,因为所有的bar的高度,宽度有是用百分比来定义的。缺点也很明显,需要定义12个bar,并且每个bar都要定义独立的css,相对来说html和css的代码量有点多。
方案3,这个方案类似sencha touch中实现的效果
方案的基本思想是:首先利用html和css呈现4个bar,再通过css的伪元素: before和:after定义每个bar的前后内容,这样使得由原始的4个bar产生12个bar的效果,其次通过css设置让12个bar的透明度逐渐递减,最后应用css3中旋转动画达到实际loading的效果。
具体效果查看这里:Demo3
这个方案是3个方案中应用css技术最彻底的一个,html的代码最少,并且也真正做到了旋转效果。缺点是不易扩展,chrome浏览器支持不是很理想。
综上分析,方案1浏览器支持不好,但是实现简单,方案2的html代码太多,但扩展好,浏览器支持不错,方案3的扩展性不好,浏览器支持也不好,但是较好地利用了css的特性。
如果开发桌面web系统,推荐方案2,如果是mobile系统,则方案2和方案3各有优势。
分享到:
相关推荐
CSS3线条旋转加载动画,多个线条loading加载动画。
css3旋转加载动画是一款纯css3实现的loading动态旋转加载效果。 css3旋转加载动画演示图:
纯CSS3彩色旋转加载动画特效是一款实用的网页加载动画特效下载。
这是一款简单好看的CSS3圆环旋转加载loading动画特效,纯CSS3实现多层圆环页面加载动画效果。
CSS3立方体3D旋转加载动画,纯CSS3代码,3D立方体组合旋转动画,3D立方体组合旋转拆分动画。
CSS3加载动画是一款同一种模式,都是一群小球在大球里面形成各种排列从而达到Loading加载动画的效果。
CSS3网页图片加载动画代码,CSS3加载图片动画特效,loading图片动画效果。
css3加载动画 齿轮 轻量 css3加载动画 齿轮 轻量 css3加载动画 齿轮 轻量 css3加载动画 齿轮 轻量
CSS3绿色Loading加载动画特效是一款纯CSS3实现的绿色清新页面Loading加载动画特效。
纯css3 3D旋转科技球体动画特效 纯css3 3D旋转科技球体动画特效
waitMe是一款jQuery和CSS3超酷loading加载动画特效插件。该loading加载动画特效使用CSS3制作了14种不同的loading动画效果,并且你还可以使用图片作为loading动画。
效果描述: css3应用范围越来越广,... 使用方法: 1、将head中的css样式以及js引入到你的网页中 2、选择一个你喜欢的loading效果,复制其中的html到你的网页中即可 (注意index.html底部的js别漏掉了)
css3加载动画特效制作css3 win8加载动画特效
CSS3发光Loading加载动画是一款与众不同的CSS3 Loading动画效果,它是由几个不同的动画效果组合而成的,像文字打印效果、发光效果、飞入飞出效果,这几种效果都非常酷。 演示页:...
css3球形图标加载动画 css3球形图标加载动画 css3球形图标加载动画
最近,我们刚刚分享过一款纯CSS3实现的六边形加载动画,这种利用几何图形实现...这次我们要分享的也是一款基于纯CSS3的Loading加载动画,它由2条逆向旋转的发光线条组成,在黑色的背景下,这种发光的动画显得更加漂亮。