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

Material Design风格的点击波特效

安装

可以通过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