简要教程
这是一款基于mo.js制作的一组炫酷图标动画特效。这组图标动画共有17种效果,它们使用font-awesome作为图标,采用SVG技术,在用户点击图标时产生各种炫酷的图标动画特效。
mo.js是Oleg Solomka开发的一款图形动画javascript库。通过它你可以制作出非常有趣的图形动画效果。
使用方法
HTML结构
图标的HTML结构使用一个按钮来包裹一个Font Awesome图标。
制作图标动画
然后你就可以通过mo.js提供的方法来制作动画特效。
var el = document.querySelector('.icobutton'),
elSpan = el.querySelector('span'),
// mo.js timeline obj
timeline = new mojs.Timeline(),
// tweens for the animation:
// burst animation
tween1 = new mojs.Burst({
parent: el,
duration: 1500,
shape : 'circle',
fill : [ '#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC5