之前写过一篇文章:
css3实现qq空间相册关闭按钮转圈动画,用
css3实现非常简单,但是兼容性不好,只有chrome,safari5,opera11,firefox4以上才能支持,目前firefox正式版是3.6,还不支持这个效果。今天研究了一下
svg,
svg主要是用来绘制矢量图形,找到一个很好的解决方案,可以解决所有
浏览器的兼容。
点击观看演示 首先需要载入javascript库
然后编写javascript,写法跟canvas有点类似,事件添加方法,动画和jquery类似
window.onload = function () { var paper = Raphael(0, 0, 26, 26);//在(0,0)的地方绘制26×26的画布 var c=paper.image("http://www.zhouwenbin.com/wp-content/uploads/2011/01/close.png",0,0,26,26);//导入图片 c.hover(function (event) {//添加鼠标经过事件 this.animate({rotation:360}, 1000, "<>");//1秒内由慢到快到慢旋转360度,<>相当于ease-in-out }, function (event) { this.animate({rotation:0}, 1000, "<>"); }); }
animate写法跟css3有点不同,跟jquery比较相似,具体的动画效果点击观看演示 完整代码如下,几行代码就实现了,svg非常的有潜力。