发布网友 发布时间:2022-04-20 16:57
共4个回答
懂视网 时间:2022-04-20 10:42
基于mo.js制作的17种炫酷图标动画特效简要教程
这是一款基于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。
热心网友 时间:2022-04-20 07:50
更多视频热心网友 时间:2022-04-20 09:08
作为一个什么都要会一点儿的运营,前几天遇到一件比较棘手的事情:客户要求商城后台功能模块图标太丑想要换一下,奈何客户只付了很低的价格购买了我们一套模板APP,老板并不想为他浪费UI的宝贵时间,就让我这个不懂设计的运营随便找一些给他换上。热心网友 时间:2022-04-20 10:42
今天推荐的这个项目是「Gossip」,是一个高效创建和演示炫酷幻灯片的用户界面。