mojs实现鼠标点击爆炸动画效果代码
代码语言:html
所属分类:动画
代码描述:mojs实现鼠标点击爆炸动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<html lang="en"> <head> <meta charset="UTF-8"> <style> body, html { padding: 0; margin: 0; width: 100%; height: 100%; //overflow: hidden; } body { background: rgba(241, 226, 215, 0.2); background: #777; position: relative; background: #EA485C; } </style> </head> <body> <div class="contrain" id="js-constrain"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mo.0.265.6.js"></script> <div></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/mojs-player.0.43.15.js"></script> <script> const COLORS = { RED: '#FD5061', YELLOW: '#FFCEA5', BLACK: '#29363B', WHITE: 'white', VINOUS: '#A50710' }; const DURATION = 500; const CNT = 10; const PARENT_H = 50; const BURST_R = 75; const SHIFT = 300; const makeDust = (dir = -1) => { const parent = new mojs.Shape({ left: 0, top: 0, width: 200, height: 50, radius: 0, x: { 0: dir * SHIFT }, duration: 1.2 * DURATION, isShowStart: true, isTimelineLess: true, isForce3d: true }); parent.el.style['overflow'] = 'hidden'; const burst = new mojs.Burst({ parent: parent.el, count: CNT, top: PARENT_H + BURST_R, degree: 90, radius: BURST_R, angle: dir === -1 ? { [-90]: 40 }: { [0]: -130 }, children: { fill: 'white', delay: dir === -1 ? `stagger(${DURATION}, -${DURATION / CNT})`: `stagger(${DURATION / CNT})`, radius: 'rand(8, 25)', direction: -1, isSwirl: true, isForce3d: true } }); const fadeBurst = new mojs.Burst({ parent: parent.el, count: 2, degree: 0, angle: -1 * dir * 75, radius: { 0: 100 }, top: '90%', timeline: { delay: .8 * DURATION }, children: { fill: 'white', pathScale: [.65, 1], radius: 'rand(12, 15)', direction: [dir, -1 * dir], isSwirl: true, isForce3d: true .........完整代码请登录后点击上方下载按钮下载查看
网友评论0