看到手机app的点击波浪效果感觉挺不错的，自己用js+css写了下这种效果：
CSS
：
/*按钮样式*/
#btn{
width: 200px;
height: 35px;
line-height: 35px;
background-color: #00BB9E;
color: white;
outline: none;
box-shadow: none;
border: none;
overflow: hidden;
position: relative;
}
/*波浪样式*/
#span{
position: absolute;
width: 10px;
height: 10px;
transition: all 0.6s ease-in;
background-color: white;
opacity: .2;
border-radius: 35px;
}HTML：
<button id="btn">确定 </button>JS：
//可以执行一次点击效果
var oneClick = true;
document.getElementById("btn").addEventListener('click',function(e){
//判断是否可以执行一次点击效果
// --因为执行波浪效果需要时间，一次波浪结束之后允许执行下一次点击
if (oneClick){
this.innerHTML += "<span id='span'></span>";
//获取点击时的坐标
var event = e || window.event;
var x = event.clientX;
var y = event.clientY;
//获取按钮的坐标
var moveX = document.getElementById("btn").offsetLeft;
var moveY = document.getElementById("btn").offsetTop;
//获取按钮宽度
var btnWidth = document.getElementById("btn").clientWidth;
//设置点击后波浪样式
document.getElementById("span").style.borderRadius = 0;
document.getElementById("span").style.width = parseInt(btnWidth)*2+'px';
document.getElementById("span").style.left = x-moveX-5+'px';
document.getElementById("span").style.marginLeft = -btnWidth+'px';
document.getElementById("span").style.height = parseInt(btnWidth)*2+'px';
document.getElementById("span").style.top = y-moveY-5+'px';
document.getElementById("span").style.marginTop = -btnWidth+'px';
//定时删除波浪
setTimeout(function(){
document.getElementById("span").remove();
oneClick = true;
},600);
//不可以执行一次点击效果
oneClick = false;
}else {
return false;
}
})全部代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>按钮点击波浪效果</title>
<style>
/*按钮样式*/
#btn{
width: 200px;
height: 35px;
line-height: 35px;
background-color: #00BB9E;
color: white;
outline: none;
box-shadow: none;
border: none;
overflow: hidden;
position: relative;
}
/*波浪样式*/
#span{
position: absolute;
width: 10px;
height: 10px;
transition: all 0.6s ease-in;
background-color: white;
opacity: .2;
border-radius: 35px;
}
</style>
</head>
<body>
<button id="btn">确定 </button>
<script>
//可以执行一次点击效果
var oneClick = true;
document.getElementById("btn").addEventListener('click',function(e){
//判断是否可以执行一次点击效果
// --因为执行波浪效果需要时间，一次波浪结束之后允许执行下一次点击
if (oneClick){
this.innerHTML += "<span id='span'></span>";
//获取点击时的坐标
var event = e || window.event;
var x = event.clientX;
var y = event.clientY;
//获取按钮的坐标
var moveX = document.getElementById("btn").offsetLeft;
var moveY = document.getElementById("btn").offsetTop;
//获取按钮宽度
var btnWidth = document.getElementById("btn").clientWidth;
//设置点击后波浪样式
document.getElementById("span").style.borderRadius = 0;
document.getElementById("span").style.width = parseInt(btnWidth)*2+'px';
document.getElementById("span").style.left = x-moveX-5+'px';
document.getElementById("span").style.marginLeft = -btnWidth+'px';
document.getElementById("span").style.height = parseInt(btnWidth)*2+'px';
document.getElementById("span").style.top = y-moveY-5+'px';
document.getElementById("span").style.marginTop = -btnWidth+'px';
//定时删除波浪
setTimeout(function(){
document.getElementById("span").remove();
oneClick = true;
},600);
//不可以执行一次点击效果
oneClick = false;
}else {
return false;
}
})
</script>
</body>
</html>