21xrx.com
2024-11-25 23:57:47 Monday
登录
文章检索 我的文章 写文章
动画库Mo.js:让你的网站更生动
2023-06-15 14:17:23 深夜i     --     --
JavaScript动画库 Mo

Mo.js是一款轻量级的JavaScript动画库,能够让你创建各种精美的动画效果,为网站注入更加生动的元素。它的API简单易懂,使用起来非常方便。而且Mo.js还支持SVG和DOM元素上的动画,让你的网站动态效果更加出色。

下面是一段使用Mo.js创建的动态效果代码:


const burst = new mojs.Burst({

 count: 6,

 radius: {50: 150},

 children: {

  shape: 'line',

  stroke: 'white',

  strokeWidth: {6: 0},

  angle: {0: 180},

  radius: 'rand(30, 60)',

  duration: 2000

 }

});

const triangle = new mojs.Shape({

 shape: 'polygon',

 points: 3,

 radius: {50: 150},

 fill: 'none',

 stroke: 'white',

 strokeWidth: {6: 0},

 duration: 2000

});

const timeline = new mojs.Timeline();

timeline.add(burst, triangle);

document.addEventListener('click', function(e) {

 burst.tune(x: e.pageX).replay();

 triangle.tune( y: e.pageY).replay();

});

这段代码可以创建一个当鼠标单击页面时发生的爆炸效果。同时,一个三角形图形会从中心扩散出去,并最终消失。这样的动画效果可以让你的网站更加生动有趣,吸引更多的用户。

.js,SVG,DOM元素,动态效果

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复
    相似文章