这是一款效果非常炫酷的html5 svg炫酷图标变形动画特效。类似的效果有：html5 svg和css3超酷图标动画特效。
使用方法
1、添加一组SVG图标到你的HTML文件中。
2、通过调用new SVGMorpheus(element)方法来创建一个SVG Morpheus对象。SVG图标可以包含在Object/IFrame/Inline中。可以是一个DOM元素或CSS选择器，例如：var myIcons = new SVGMorpheus('#myIconSet');
3、在初始化之后，你得到一个带有to(ID)方法的SVGMorpheus对象。ID是图标集中的图标id，使用它来从一个图标变形到另一个图标。myIcons.to('icon1');
可用参数
SVGMorpheus构造函数
var myIcons = new SVGMorpheus(element, options, callback);
element：Object/IFrame/SVG元素包含的一个图标集。可以是一个DOM元素或一个CSS选择器。
options：可选，对象指定的默认参数。
options.iconId：可选，初始化后显示的SVG图标的id。默认值为图标集中的最后一个图标的id。
options.duration：可选，设置一个默认的transition动画的duration。单位毫秒，默认值为750。
options.easing：可选，设置一个默认的transition动画的easing效果。默认值为quad-in-out。
options.rotation：可选，设置一个默认SVG图标旋转方式。clock = clockwise, counterclock = counterclockwise, random = 随机设置clock/counterclock, none = 不旋转，默认值为clock(顺时针)。
callback：可选，设置SVG图标旋转结束后的回调事件。
SVGMorpheus.to()
myIcons.to(iconId, options, callback);
iconId：下一个变形图标的id。
options：可选，对象指定的默认参数。
options.duration：可选，设置一个默认的transition动画的duration，单位毫秒。
options.easing：可选，设置一个默认的transition动画的easing效果。
options.rotation：可选，设置一个默认SVG图标旋转方式。clock = clockwise, counterclock = counterclockwise, random = 随机设置clock/counterclock, none = 不旋转，默认值为clock(顺时针)。
callback：可选，设置SVG图标旋转结束后的回调事件。
支持的Easings效果
circ-in, circ-out, circ-in-out, cubic-in, cubic-out, cubic-in-out, elastic-in, elastic-out, elastic-in-out, expo-in, expo-out, expo-in-out, linear, quad-in, quad-out, quad-in-out, quart-in, quart-out, quart-in-out, quint-in, quint-out, quint-in-out, sine-in, sine-out, sine-in-out
图标集的html结构
SVG图标集要具有下面的html结构：
1、元素必须有id属性。
1、必须有图形元素(,circle, rect, ellipse, polygon, line)。
Shape elements
Shape elements
如果觉得《html图标动画效果 html5 svg炫酷图标变形动画特效》对你有帮助，请点赞、收藏，并留下你的观点哦！
