css3 animation动画制作点击波特效

按钮的点击波效果：

			  
<button data-rippleria class="button">Click Me!</button>
<button data-rippleria class="button button-outline rippleria-dark">And Me!</button>

自定义动画曲线：

			 
<button data-rippleria 
data-rippleria-color="rgba(100,178,53,.35)" 
data-rippleria-duration="1000" 
data-rippleria-easing="cubic-bezier(0.680, -0.380, 0.385, 1.650)" 
class="btn btn-lg btn-default">Custom</button>

图片点击波效果：

<div class="text-center">
<a style="display: inline-block;" id="rippleria" href="#">
<img src="http://www.lovethispic.com/uploaded_images/15163-Pretty-Girl.jpg" alt="image">
</a>
</div>

<script>
function randInt(min, max) {
var rand = min + Math.random() * (max - min)
rand = Math.round(rand);
return rand;
}

$('#rippleria').rippleria({
// aniamtion speed
duration: 750,
// custom easing effect
easing: 'linear',
// custom color
color: undefined
});

$('#rippleria').click(function(e) {
e.preventDefault();
$(this).rippleria('changeColor', 
  'rgba('+randInt(0,255)+','+randInt(0,255)+','+randInt(0,255)+',0.'+randInt(3,5));
});
</script>