版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
<head>
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
<meta charset="UTF-8">
<title></title>
</head>
<style>
.wave_btn {
left:0px;
top:0px;
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
.wave {
position: absolute;
left: 100%;
top: 100%;
width: 20px;
height: 20px;
background: rgba(40, 40, 40, .2);
border-radius: 50%;
animation: wave_shape 1.2s linear forwards;
-webkit-animation: wave_shape 1.2s linear forwards;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
pointer-events: none;
}
@keyframes wave_shape {
0% {
width: 0px;
height: 0px;
}
100% {
width: 200px;
height: 200px;
}
}
@-webkit-keyframes wave_shape {
0% {
width: 0px;
height: 0px;
}
100% {
width: 200px;
height: 200px;
}
}
.btn{
width:100px;
height:30px;
background:#2f5398;
color:#fff;
font-size:12px;
line-height:30px;
text-align:center;
position:relative;
margin:30px;
user-select:none;
}
</style>
<body>
<p>animation实现的水波按钮</p>
<div class='btn'>
<span>点我试试</span>
<div class='wave_btn' id='wave_btn'></div>
</div>
</body>
<script>
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('wave_btn').addEventListener('click', function(e) {
if(e.target.querySelector('.wave')) {
e.target.removeChild(e.target.querySelector('.wave'));
}
var _$div = document.createElement('div');
_$div.setAttribute('class', 'wave');
_$div.style.left = e.offsetX + 'px';
_$div.style.top = e.offsetY + 'px';
e.target.appendChild(_$div);
})
})
</script>