投稿 搜索

热搜词

热门文章

当前位置: 站长天下 / 按钮图标 / js点击按钮动画粒子特效
js点击按钮动画粒子特效
标签:

插件介绍

    这是一款js点击按钮动画粒子特效。该特效在点击按钮时,按钮会以各种粒子分解的方式进行隐藏,点击重放按钮后,又会以粒子组合的方式重新组装成一个按钮,非常炫酷。

    浏览器兼容性

    浏览器兼容性
    时间:2018-04-27
    阅读:

js点击按钮动画粒子特效

简要教程

这是一款js点击按钮动画粒子特效。该特效在点击按钮时,按钮会以各种粒子分解的方式进行隐藏,点击重放按钮后,又会以粒子组合的方式重新组装成一个按钮,非常炫酷。

该js点击按钮动画粒子特效共有12种不同的粒子动画特效,动画使用anime.js来制作。


使用方法

在页面中引入anime.min.js和particles.min.js文件。

<script src="js/anime.min.js"></script>
<script src="dist/particles.min.js"></script>

HTML结构

<button class="button">Button</button>

初始化插件
然后会通过下面的方法来初始化该js点击按钮动画粒子特效

// Initialize a new instance of Particles to disintegrate/integrate the button
var particles = new Particles('.button');
// Disintegrate the button into particles
particles.disintegrate();
// particles.integrate(); // would do the opposite

配置参数

particles.min.js插件允许我们设置配置参数,可用的配置参数如下: