Material Design风格点击波和卡片阴影特效

material-ripple是一款Material Design风格的点击波特效。该点击波特效配合卡片使用，有5种鼠标滑过卡片时的阴影效果可以选择，整体效果非常时尚。

安装

可以通过npm来安装该material-ripple点击波特效插件。

$ npm install material-ripple                  
                

使用方法

使用该点击波特效需要在页面中引入ripple.min.css和jquery，以及ripple.min.js文件。

<link href="ripple.min.css" rel="stylesheet" type="text/css" />
<script src="jquery.min.js"></script> 
<script src="ripple.min.js"></script>                   
                

HTML结构

该点击波特效的基本HTML结构如下：

<div class="material-ripple">
  <span>My Account</span>
</div>                
                

CSS样式

你可以通过data-ripple-color属性来修改点击波的颜色。

<div class="material-ripple" data-ripple-color="#3498db">
  <span>Settings</span>
</div>                  
                

或者通过CSS来修改点击波的颜色。

.red-ripple > .material-ink {
  background-color: red;
}                  
                

卡片阴影效果

你可以将这个点击波特效和Samuel Thornton设计的Material Design风格卡片结合使用，它提供了5最后不同的卡片阴影效果，级别从1-5。

<div class="material-card material-shadow-1">
  ...
</div>                  
                

material-ripple点击波特效插件的github地址为：https://github.com/balintsoos/material-ripple