html按钮点击效果代码,js点击按钮实现水波纹效果代码（CSS3和Canves）

js点击按钮实现水波纹效果代码(CSS3和Canves)

2019-01-06

编程之家

https://www.jb51

编程之家收集整理的这篇文章主要介绍了js点击按钮实现水波纹效果代码(CSS3和Canves)，编程之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

近来看到个不错的按钮点击效果，当点击时产生一次水波涟漪效果，挺好玩的，于是简单的实现了下(没考虑低版本浏览器兼容问题)

先看看效果吧，如下图(录制gif软件有点渣，看起来卡卡的...)

这种效果可以由元素内嵌套canves实现，也可以由css3实现。

Canves实现

网上摘了一份canves实现的代码，略微去掉了些重复定义的样式并且给出js注释，代码如下

css代码：

js代码：

init();

CSS3实现

接下来就是纯手打的代码了...觉得还是css3实现的方便些，可能是css写习惯了...

html代码

css代码

.waves{

position:relative;

cursor:pointer;

display:inline-block;

overflow:hidden;

text-align: center;

-webkit-tap-highlight-color:transparent;

z-index:1;

}

.waves .waves-animation{

position:absolute;

border-radius:50%;

width:25px;

height:25px;

opacity:0;

background:rgba(255,255,0.3);

transition:all 0.7s ease-out;

transition-property:transform,opacity,-webkit-transform;

-webkit-transform:scale(0);

transform:scale(0);

pointer-events:none

}

.ts-btn{

width: 200px;

height: 56px;

line-height: 56px;

background: #f57035;

color: #fff;

border-radius: 5px;

}

js代码

document.addEventListener('DOMContentLoaded',function(){

var duration = 750;

// 样式string拼凑

var forStyle = function(position){

var cssStr = '';

for( var key in position){

if(position.hasOwnProperty(key)) cssStr += key+':'+position[key]+';';

};

return cssStr;

}

// 获取鼠标点击位置

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);