基于mo.js制作的17种炫酷图标动画特效

<button class="icobutton icobutton--thumbs-up">
 <span class="fa fa-thumbs-up"></span>
</button>

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();
});