看到手机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;
}
/*波浪样式*/
.wave{
position: absolute;
width: 10px;
height: 10px;
transition: all .6s ease-in-out;
background-color: white;
opacity: .2;
border-radius: 9999px;
}
HTML:
<button id="btn">确定 </button>
JS:
//可以执行一次点击效果
//可以执行一次点击效果
var oneClick = true;
document.getElementById("btn").addEventListener('click',function(e){
//判断是否可以执行一次点击效果
// --因为执行波浪效果需要时间,一次波浪结束之后允许执行下一次点击
if (oneClick){
this.innerHTML += "<div class='wave'></div>";
//获取点击时的坐标
var event = e || window.event;
var x = event.clientX;
var y = event.clientY;
//获取按钮的坐标
var moveX = this.offsetLeft;
var moveY = this.offsetTop;
//获取按钮宽度
var btnWidth = this.clientWidth;
//设置点击后波浪样式
var waveDiv = document.querySelector("#btn .wave");
waveDiv.style.borderRadius = 0;
waveDiv.style.width = parseInt(btnWidth)*2+'px';
waveDiv.style.left = x-moveX-5+'px';
waveDiv.style.marginLeft = -btnWidth+'px';
waveDiv.style.height = parseInt(btnWidth)*2+'px';
waveDiv.style.top = y-moveY-5+'px';
waveDiv.style.marginTop = -btnWidth+'px';
//定时删除波浪
setTimeout(function(){
waveDiv.remove();
oneClick = true;
},600);
//不可以执行一次点击效果
oneClick = false;
}else {
return false;
}
})
全部代码:
<!doctype html>
<html>
<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;
}
/*波浪样式*/
.wave{
position: absolute;
width: 10px;
height: 10px;
transition: all .6s ease-in-out;
background-color: white;
opacity: .2;
border-radius: 9999px;
}
</style>
</head>
<body>
<button id="btn">确定 </button>
<script>
//可以执行一次点击效果
var oneClick = true;
document.getElementById("btn").addEventListener('click',function(e){
//判断是否可以执行一次点击效果
// --因为执行波浪效果需要时间,一次波浪结束之后允许执行下一次点击
if (oneClick){
this.innerHTML += "<div class='wave'></div>";
//获取点击时的坐标
var event = e || window.event;
var x = event.clientX;
var y = event.clientY;
//获取按钮的坐标
var moveX = this.offsetLeft;
var moveY = this.offsetTop;
//获取按钮宽度
var btnWidth = this.clientWidth;
//设置点击后波浪样式
var waveDiv = document.querySelector("#btn .wave");
waveDiv.style.borderRadius = 0;
waveDiv.style.width = parseInt(btnWidth)*2+'px';
waveDiv.style.left = x-moveX-5+'px';
waveDiv.style.marginLeft = -btnWidth+'px';
waveDiv.style.height = parseInt(btnWidth)*2+'px';
waveDiv.style.top = y-moveY-5+'px';
waveDiv.style.marginTop = -btnWidth+'px';
//定时删除波浪
setTimeout(function(){
waveDiv.remove();
oneClick = true;
},600);
//不可以执行一次点击效果
oneClick = false;
}else {
return false;
}
})
</script>
</body>
</html>