简要教程
这是一款基于mo.js制作的一组炫酷图标动画特效。这组图标动画共有17种效果，它们使用font-awesome作为图标，采用svg技术，在用户点击图标时产生各种炫酷的图标动画特效。
mo.js是oleg solomka开发的一款图形动画javascript库。通过它你可以制作出非常有趣的图形动画效果。
使用方法
html结构
图标的html结构使用一个按钮来包裹一个font awesome图标。
<button class="icobutton icobutton--thumbs-up"> <span class="fa fa-thumbs-up"></span> </button>
制作图标动画
然后你就可以通过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', '#dec58a', '#8ad1de' ], x: '50%', y: '50%', opacity: 0.6, childoptions: { radius: {20:0} }, radius: {40:120}, count: 6, isswirl: true, isrunless: true, easing: mojs.easing.bezier(0.1, 1, 0.3, 1) }), // ring animation tween2 = new mojs.transit({ parent: el, duration: 750, type: 'circle', radius: {0: 50}, fill: 'transparent', stroke: '#988ade', strokewidth: {15:0}, opacity: 0.6, x: '50%', y: '50%', isrunless: true, easing: mojs.easing.bezier(0, 1, 0.5, 1) }), // icon scale animation tween3 = new mojs.tween({ duration : 900, onupdate: function(progress) { var scaleprogress = scalecurve4(progress); elspan.style.webkittransform = elspan.style.transform = 'scale3d(' + scaleprogress + ',' + scaleprogress + ',1)'; } }); // add tweens to timeline: timeline.add(tween1, tween2, tween3); // when clicking the button start the timeline/animation: el.addeventlistener('mouseenter', function() { timeline.start(); });
关于mo.js的详细使用方法，你可以参考它的官方网站：mo.js。
以上就是基于mo.js制作的17种炫酷图标动画特效的内容。