近来看到个不错的按钮点击效果，当点击时产生一次水波涟漪效果，挺好玩的，于是简单的实现了下(没考虑低版本浏览器兼容问题)
先看看效果吧，如下图（录制gif软件有点渣，看起来卡卡的...）
这种效果可以由元素内嵌套canves实现，也可以由css3实现。
Canves实现
网上摘了一份canves实现的代码，略微去掉了些重复定义的样式并且给出js注释，代码如下
HTML代码
css代码
js代码
CSS3实现
接下来就是纯手打的代码了...觉得还是css3实现的方便些，可能是css写习惯了...
html代码
css代码
js代码
获取鼠标点击位置
var forRect = function(target){
var position = {
top:0,left:0
},ele = document.documentElement;
'undefined' != typeof target.getBoundingClientRect && (position = target.getBoundingClientRect());
return {
top: position.top + window.pageYOffset - ele.clientTop,left: position.left + window.pageXOffset - ele.clientLeft
}
}
var show = function(event){
var pDiv = event.target,cDiv = document.createElement('div');
pDiv.appendChild(cDiv);
var rectObj = forRect(pDiv),_height = event.pageY - rectObj.top,_left = event.pageX - rectObj.left,_scale = 'scale(' + pDiv.clientWidth / 100 * 10 + ')';
var position = {
top: _height+'px',left: _left+'px'
};
cDiv.className = cDiv.className + " waves-animation",cDiv.setAttribute("style",forStyle(position)),position["-webkit-transform"] = _scale,position["-moz-transform"] = _scale,position["-ms-transform"] = _scale,position["-o-transform"] = _scale,position.transform = _scale,position.opacity = "1",position["-webkit-transition-duration"] = duration + "ms",position["-moz-transition-duration"] = duration + "ms",position["-o-transition-duration"] = duration + "ms",position["transition-duration"] = duration + "ms",position["-webkit-transition-timing-function"] = "cubic-bezier(0.250,0.460,0.450,0.940)",position["-moz-transition-timing-function"] = "cubic-bezier(0.250,position["-o-transition-timing-function"] = "cubic-bezier(0.250,position["transition-timing-function"] = "cubic-bezier(0.250,forStyle(position));
var finishStyle = {
opacity: 0,"-webkit-transition-duration": duration + "ms",// 过渡时间
"-moz-transition-duration": duration + "ms","-o-transition-duration": duration + "ms","transition-duration": duration + "ms","-webkit-transform" : _scale,"-moz-transform" : _scale,"-ms-transform" : _scale,"-o-transform" : _scale,top: _height + "px",left: _left + "px",};
setTimeout(function(){
cDiv.setAttribute("style",forStyle(finishStyle));
setTimeout(function(){
pDiv.removeChild(cDiv);
},duration);
},100)
}
document.querySelector('.waves').addEventListener('click',function(e){
show(e);
},!1);
},!1);
好了，就这些，顺便，中秋快乐~
原文链接：https://www.f2er.com/js/45834.html