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

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

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

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

Canves实现

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

html代码：Press me!

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

}

);

} (),

// 为每个指定元素生成canves

init = 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代码

Press me!

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

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

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