svg +动画和 css3 动画的区别

html-css012

svg +动画和 css3 动画的区别,第1张

svg是可以在网页使用的矢量图像,可以用AI进行编辑和生成。

css3给svg加动画(改变尺寸、位置等)可以使用@keyframes和animation属性定义动画

不过svg本身就支持动画

参见:http://msdn.microsoft.com/zh-cn/library/gg193979

CSS3动画,javascript动画(canvas),html动画(SVG)。svg支持三种类型的动画分别是CSS3动画,javascript动画(canvas),html动画(SVG),SVG指可伸缩矢量图形,是使用XML来描述二维图形和绘图程序的语言。

方法/步骤

HTML结构

该鼠标点击按钮特效中每一个可点击的元素都是一个<button>按钮

CSS样式

以下是该css3点击按钮特效的通用CSS样式:

插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果:

上面的CSS代码可以生成如下图的动画效果:

在“Stana”效果中,使用了html5 SVG clipPath,在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。

在“Stoja”效果中使用了CSS clip-path属性,这个效果也需要浏览器的支持才能看得到的。