可视化CSS3动画代码生成js库插件bounce js怎么用

发布时间:2021-11-11 09:45:43 作者:柒染
来源:亿速云 阅读:154

可视化CSS3动画代码生成js库插件bounce js怎么用,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

  Bounce.js是一款功能非常强大的可视化CSS3动画代码生成js库插件。该js库插件提供了一个在线APP,通过该APP可以在可视化的条件下编辑CSS3的各种动画效果,如移动、旋转、倾斜、easing等效果,编辑完成后可以直接获取该CSS3帧动画的代码,复制代码带你的页面中即可在你的页面上获得与该动画一样的效果。此外,你也可以单独使用Bounce.js,通过js代码来完成各种CSS3动画效果。Bounce.js能与jQuery完美结合。

  Bounce.js安装

  可以通过Bower或NPM来安装Bounce.js。

  $bowerinstallbounce.js

  #OR

  $npminstallbounce.js

  Bounce.js使用方法

  要使用bounce.js来创建CSS3动画,首先要创建一个Bounce对象。

  varbounce=newBounce();

  制作CSS3动画前必须先创建Bounce对象,然后使用该对象来添加各种动画组件:scale、rotate、translate和skew。你可以为CSS3动画定义一个名称,或者直接在该对象上应用页面上的某个元素。

  添加CSS3动画组件

  scale

  如上面所说的,你要使用scale、rotate、translate或skew方法来创建动画。所用这些方法都接收一定数量的参数,如from和to参数定义动画元素的开始和结束位置。所用这些方法都是可以链式编程的。

  varbounce=newBounce();

  bounce.scale({

  from:{x:0.5,y:0.5},

  to:{x:1,y:1}

  });

  上面代码中的from和to参数定义了元素在X轴(宽度)和Y轴(高度)上scale的比例。这个例子使元素从50%的大小变化到100%的大小。

  rotate

  varbounce=newBounce();

  bounce.rotate({

  from:0,

  to:90

  });

  上面代码中的from和to参数定义了元素旋转的度数。

  总之,Bounce.js给大家简单的介绍了一些,希望大家多看看。

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注亿速云行业资讯频道,感谢您对亿速云的支持。

推荐阅读:
  1. Laravel-Gii 可视化代码生成工具 CRUD +G
  2. JS如使用音频可视化插件Wavesurfer.js

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

css js

上一篇:oracle数据库中为什么在查询里索引未被使用

下一篇:Django中的unittest应用是什么

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》