html5 水波纹,html5 +css3 点击后水波纹扩散效果 兼容移动端

content="text/html;charset=utf-8"/>

content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

html5+ js +css3 点击后水波纹扩散效果 兼容移动端-幸凡学习网

margin: 0;

padding: 0;

}

.center {

text-align: center

}

.btn {

position: relative;

width: 13em;

height: 3em;

margin: 2em;

border: none;

outline: none;

letter-spacing: .2em;

font-weight: bold;

background: #999;

cursor: pointer;

overflow: hidden;

user-select: none;

border-radius: 2px;

color: #fff;

}

button:nth-child(2) {

background: #4285f4;

}

button:nth-child(3) {

background: #00bad2;

}

button:nth-child(4) {

background: #ff8a80;

}

button:nth-child(5) {

background: #ffae00;

}

button:nth-child(6) {

background: #aec156;

}

button:nth-child(7) {

background: #a060a8;

}

button:nth-child(8) {

background: #a78660;

}

button:nth-child(9) {

background: #5da065;

}

button:nth-child(10) {

background: #5e6b9a;

}

button:nth-child(11) {

background: #9a5e5e;

}

button:nth-child(12) {

background: #666;

}

.ripple {

position: absolute;

background: rgba(0, 0, 0, .15);

border-radius: 100%;

transform: scale(0);

pointer-events: none;

}

.ripple.show {

animation: ripple .75s ease-out;

}

@keyframes ripple {

to {

transform: scale(2);

opacity: 0;

}

}

class="center">html5 +css3 点击后水波纹扩散效果 兼容移动端

BUTTON

class="btn">BUTTON

BUTTON

class="btn">BUTTON

BUTTON

class="btn">BUTTON

BUTTON

class="btn">BUTTON

BUTTON

class="btn">BUTTON

BUTTON

class="btn">BUTTON

var addRippleEffect =

function (e) {

var target = e.target;

if (target.className.toLowerCase()

!== 'btn') {

return false;

}

var rect = target.getBoundingClientRect();

var

ripple = target.querySelector('.ripple');

if (!ripple) {

ripple =

document.createElement('span');

ripple.className = 'ripple'

ripple.style.height = ripple.style.width = Math.max(rect.width,

rect.height) + 'px'

target.appendChild(ripple);

}

ripple.classList.remove('show');

var top = e.pageY - rect.top -

ripple.offsetHeight / 2 - document.body.scrollTop;

var left = e.pageX -

rect.left - ripple.offsetWidth / 2 - document.body.scrollLeft;

ripple.style.top = top + 'px'

ripple.style.left = left + 'px'

ripple.classList.add('show');

return false;

}

document.addEventListener('click', addRippleEffect, false);

如何使用 HTML5 Canvas 制作水波纹效果

今天,我们继续分享 JavaScript 实现的效果例子,这篇文章会介绍使用 JavaScript 实现水波纹效果.水波效果以图片为背景,点击图片任意位置都会触发.有时候,我们使用普通的 Javasc ...

很实用的HTML5+CSS3注册登录窗体切换效果

1. [代码]3个很实用的HTML5+CSS3注册登录窗体切换效果