五十个html js特效动画,基于mo.js制作的17种炫酷图标动画特效

简要教程

这是一款基于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', '#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的详细使用方法，你可以参考它的官方网站：

来源http://www.htmleaf.com/html5/SVG/201602243142.html

五十个html js特效动画,基于mo.js制作的17种炫酷图标动画特效相关推荐

html图标动画效果,html5 svg炫酷图标变形动画特效
这是一款效果非常炫酷的html5 svg炫酷图标变形动画特效.类似的效果有:html5 svg和css3超酷图标动画特效. 使用方法 1.添加一组SVG图标到你的HTML文件中. 2.通过调用new ...
动漫轮播html,带17种内置过渡动画的jquery轮播图插件
bsc-slider是一款带17种内置过渡动画的jquery轮播图插件.该jquery轮播图插件可以制作最基本的轮播图效果,并内置17种过渡动画效果,还可以自定义动画的easing效果. 使用方法在 ...
pr转场卡通炫酷图形动画视频转场pr模板mogrt
适用于开场视频.动作片.幻灯片.极限运动或舞蹈视频等等. 项目特点: 独特的过渡 4096×2304 分辨率全彩控件媒体占位符包括视频教程适用于 Premiere Pro 2021 及更高版本 ...
vue.js毕业设计，基于vue.js前后端分离教室预约系统（H5移动项目）开题报告
毕业论文基于Vue.js的教室预约系统(H5) 开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓 ...
vue.js毕业设计，基于vue.js前后端分离订座预约系统设计与实现（H5移动项目）
功能介绍 [后台功能] 广告管理:设置小程序首页轮播图广告和链接留言列表:所有用户留言信息列表,支持删除会员列表:查看所有注册会员信息,支持删除录入资讯:录入资讯标题.内容等信息管理资讯:查看 ...
vue.js毕业设计，基于vue.js前后端分离订座预约系统（H5移动项目）开题报告
毕业论文基于Vue.js预约订座系统(H5) 开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓 ...
vue.js毕业设计，基于vue.js前后端分离在线教育视频点播系统（H5移动项目）开题报告
毕业论文基于Vue.js视频点播系统(H5) 开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓 ...
vue.js毕业设计，基于vue.js前后端分离在线教育视频点播小程序系统开题报告
毕业论文基于Vue.js视频点播小程序系统开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓名 ...
vue.js毕业设计，基于vue.js前后端分离在线教育视频点播小程序系统设计与实现
功能介绍用户首次登陆系统需要注册一个用户或直接使用微信作为账号,用户在登录平台后,可以进行平台的操作.主要模块包括以下几点: (1)登录功能:注册普通账号登录:也可以直接使用微信登录:登录后可以修改 ...
vue.js毕业设计，基于vue.js前后端分离外卖点餐系统（H5移动项目）开题报告
毕业论文基于Vue.js外卖点餐系统(H5) 开题报告学院: 专业: 年级: 学生姓名: 指导教师: 黄菊华 XXXX大学本科生毕业论文(设计)开题报告书姓 ...

五十个html js特效动画,基于mo.js制作的17种炫酷图标动画特效

五十个html js特效动画,基于mo.js制作的17种炫酷图标动画特效相关推荐

最新文章

热门文章