当前位置:JS特效 » 其他 » Material Design鼠标点击波特效jQuery插件
 Material Design鼠标点击波特效jQuery插件
如果您觉得内容不错,请分享:

插件介绍

rippleria.js是一款效果非常炫酷的MaterialDesign鼠标点击波特效jQuery插件。该插件使用CSS3animation动画来制作点击波效果,可以在按钮和图片等元素上制作点击波特效。

浏览器兼容性

浏览器兼容性
时间:2021-07-24 阅读:46
简要教程

rippleria.js是一款效果非常炫酷的 Material Design鼠标点击波特效jQuery插件。该插件使用CSS3 animation动画来制作点击波效果,可以在按钮和图片等元素上制作点击波特效。

安装

可以通过bower来安装该点击波插件。

$ bower i -S rippleria                  
                

使用方法

使用该点击波插件需要在页面中引入jquery.rippleria.css,jquery和jquery.rippleria.js文件。



                  
                
HTML结构

为需要添加点击波效果的元素添加data-rippleria属性。

     
                

你可以通过HTML5 data-*属性来自定义点击波的效果:

                  
                

data-rippleria-dark用于指定反色效果的点击波。

初始化插件

你也可以通过初始化插件的反色来定义点击波的效果。

$('.selector').rippleria({

  // 动画的速度
  duration: 750,

  // 自定义easing效果
  easing: 'linear',

  // 自定义颜色
  color: undefined

});

$('.selector').rippleria("changeDuration", "500");
$('.selector').rippleria("changeEasing", "ease-in-out");
$('.selector').rippleria("changeColor", "blue");                  
                

rippleria点击波插件的github地址为:https://github.com/nsept/rippleria

Top