<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css3 animation动画制作点击波特效 - 网页模板</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/zzsc-demo.css">
<link rel="stylesheet" href="css/jquery.rippleria.css">
<style type="text/css">
* {
outline: none!important;
}
.btn {
border-radius: 0;
text-transform: uppercase;
}
.btn-sample {
color: #ffffff;
background-color: #9B4DCA;
border-color: #743997;
}
.btn-sample:hover,
.btn-sample:focus,
.btn-sample:active,
.btn-sample.active,
.open .dropdown-toggle.btn-sample {
color: #ffffff;
background-color: #743997;
border-color: #743997;
}
.btn-sample:active,
.btn-sample.active,
.open .dropdown-toggle.btn-sample {
background-image: none;
}
.btn-sample.disabled,
.btn-sample[disabled],
fieldset[disabled] .btn-sample,
.btn-sample.disabled:hover,
.btn-sample[disabled]:hover,
fieldset[disabled] .btn-sample:hover,
.btn-sample.disabled:focus,
.btn-sample[disabled]:focus,
fieldset[disabled] .btn-sample:focus,
.btn-sample.disabled:active,
.btn-sample[disabled]:active,
fieldset[disabled] .btn-sample:active,
.btn-sample.disabled.active,
.btn-sample[disabled].active,
fieldset[disabled] .btn-sample.active {
background-color: #9B4DCA;
border-color: #743997;
}
.btn-sample .badge {
color: #9B4DCA;
background-color: #ffffff;
}
pre {
background-color: white;
border-radius: 0;
}
#rippleria img {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<div class="zzsc-container">
<div class="zzsc-content">
<section class="container">
<h3 class="text-center">按钮的点击波效果：</h3>
<div class="col-md-8 col-md-offset-2">
<pre>
<code class="html">
<button data-rippleria class="button">Click Me!</button>
<button data-rippleria class="button button-outline rippleria-dark">And Me!</button></code></pre></div>
</div>
<p class="text-center">
<button data-rippleria class="btn btn-lg btn-sample">点击我查看效果</button>
<button data-rippleria class="btn btn-lg btn-default rippleria-dark">反色效果</button>
</p>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3 class="text-center">自定义动画曲线：</h3>
<pre>
<code class="html">
<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></code></pre></div>
</div>
<p class="text-center">
<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">自定义动画曲线</button>
</p>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h3 class="text-center">图片点击波效果：</h3>
<div class="text-center">
<a style="display: inline-block;" id="rippleria" href="#">
<img src="img/girl.jpg" alt="image">
</a>
</div><br>
<pre><code class="html"><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></code></pre>
</div>
</div>
</section>
</div>
</div>
<script src="js/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="js/jquery.rippleria.js"></script>
<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>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p>
</div>
</body>
</html>
css3 animation动画制作点击波特效.zip （9个子文件） 
css3 animation动画制作点击波特效 jiaoben4189 css 
zzsc-demo.css 5KB jquery.rippleria.css 420B normalize.css 2KB jquery.rippleria.min.css 330B img 
girl.jpg 90KB
index.html 5KB js jquery.rippleria.js 3KB jquery.rippleria.min.js 2KB jquery-2.1.1.min.js 82KB资源评论
