Material Design风格纯js按钮点击波特效

纯js 按钮 点击波 Material Design 2016-10-26

控件介绍
这是一款使用纯js制作的炫酷Material Design风格按钮点击波特效。该按钮点击波特效不依赖于任何外部库,使用纯js制作,运行速度快,效果非常炫酷。
浏览器兼容

支持IE10+

演示下载 1920
使用方法

使用方法

在页面中引入ripple.js文件。

1
<script src="path/to/ripple.js"></script>      
HTML结构

为你需要制作按钮点击波效果的元素添加data-ripple属性。

1
<button data-ripple>Click Me</button>                 
CSS样式

为点击波添加下面的CSS样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.ripple-container {
}
.ripple-container .ripple{
    background-color: rgba(255,255,255,0.4);
    animation: ripple 2s forwards cubic-bezier(0, 0, 0.2, 1);
}
@keyframes ripple {
    0% {
        transform: scale(0);
        opacity: 1;
    }
    80% {
        transform: scale(1);
    }
    100% {
        opacity: 0;
    }
}                 
初始化插件

使用下面的JavaScript代码来在按钮点击时,激活点击波效果。

1
2
3
Array.prototype.forEach.call(document.querySelectorAll('[data-ripple]'), function(element){
  new RippleEffect(element);
});

material-ripple-effect按钮点击波特效的github地址为:https://github.com/davinder17s/material-ripple-effect

本文转载请注明出处:http://www.zhuiye.com/detail_7.html