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

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

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

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

Canves实现

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

html代码：<a class="btn color-1 material-design" data-color="#2f5398">Press me！</a>
css代码：

* { box-sizing: border-box; outline: none;}body { font-family: "Open Sans"; font-size: 100%; font-weight: 300; line-height: 1.5em; text-align: center;}.btn { border: none; display: inline-block; color: white; overflow: hidden; margin: 1rem; padding: 0; width: 150px; height: 40px; text-align: center; line-height: 40px; border-radius: 5px;}.btn.color-1 { background-color: #426fc5;}.btn-border.color-1 { background-color: transparent; border: 2px solid #426fc5; color: #426fc5;}.material-design { position: relative;}.material-design canvas { opacity: 0.25; position: absolute; top: 0; left: 0;}.container { align-content: center; align-items: flex-start; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0 auto; max-width: 46rem;}

js代码：

var canvas = {},centerX = 0,centerY = 0,color = "",containers = document.getElementsByClassName（"material-design"）context = {},element = {},radius = 0,// 根据callback生成requestAnimationFrame动画requestAnimFrame = function （） { return （window.requestAnimationFrame|| window.mozRequestAnimationFrame|| window.oRequestAnimationFrame || window.msRequestAnimationFrame || function （callback） { window.setTimeout（callback, 1000 / 60）;} ）;} （）,// 为每个指定元素生成canvesinit = function （） { containers = Array.prototype.slice.call（containers）; for （var i = 0; i < containers.length; i += 1） {canvas = document.createElement（"canvas"）;canvas.addEventListener（"click", press, false）;containers[i].appendChild（canvas）;canvas.style.width ="100%";canvas.style.height="100%";canvas.width = canvas.offsetWidth;canvas.height = canvas.offsetHeight; }},// 点击并且获取需要的数据，如点击坐标、元素大小、颜色press = function （event） { color = event.toElement.parentElement.dataset.color; element = event.toElement; context = element.getContext（"2d"）; radius = 0; centerX = event.offsetX; centerY = event.offsetY; context.clearRect（0, 0, element.width, element.height）; draw（）;},// 绘制圆形，并且执行动画draw = function （） { context.beginPath（）; context.arc（centerX, centerY, radius, 0, 2 * Math.PI, false）; context.fillStyle = color; context.fill（）; radius += 2; // 通过判断半径小于元素宽度，不断绘制 radius += 2 的圆形 if （radius < element.width） {requestAnimFrame（draw）; }};init（）;

CSS3实现

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

html代码

<a class="waves ts-btn">Press me！</a>

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,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, 0.460, 0.450, 0.940）",position["-o-transition-timing-function"] = "cubic-bezier（0.250, 0.460, 0.450, 0.940）",position["transition-timing-function"] = "cubic-bezier（0.250, 0.460, 0.450, 0.940）",cDiv.setAttribute（"style", 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）;

就这些，原理也简单，获取点击位置 > 添加样式顺便，中秋快乐~

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。