html5 渐变动画效果图,HTML5 CSS3很棒的一款带渐变背景色和涟漪动画的原质化风格按钮...

JavaScript

语言：

JaveScriptBabelCoffeeScript

确定

const isMobile = window.navigator.userAgent.match(/Mobile/) && window.navigator.userAgent.match(/Mobile/)[0] === "Mobile";

const event = isMobile ? "touchend" : "click";

const button = document.querySelectorAll('*[data-animation="ripple"]'),

container = document.querySelector(".container");

for (var i = 0; i < button.length; i++) {

const currentBtn = button[i];

currentBtn.addEventListener(event, function(e) {

e.preventDefault();

const button = e.target,

rect = button.getBoundingClientRect(),

originalBtn = this,

btnHeight = rect.height,

btnWidth = rect.width;

let posMouseX = 0,

posMouseY = 0;

if (isMobile) {

posMouseX = e.changedTouches[0].pageX - rect.left;

posMouseY = e.changedTouches[0].pageY - rect.top;

} else {

posMouseX = e.pageX - rect.left;

posMouseY = e.pageY - rect.top;

}

const baseCSS = `position: absolute;

width: ${btnWidth * 2}px;

height: ${btnWidth * 2}px;

transition: all linear 700ms;

transition-timing-function:cubic-bezier(0.250, 0.460, 0.450, 0.940);

border-radius: 50%;

background: var(--color-ripple);

top:${posMouseY - btnWidth}px;

left:${posMouseX - btnWidth}px;

pointer-events: none;

transform:scale(0)`

var rippleEffect = document.createElement("span");

rippleEffect.style.cssText = baseCSS;

//prepare the dom

currentBtn.style.overflow = "hidden";

this.appendChild(rippleEffect);

//start animation

setTimeout(function() {

rippleEffect.style.cssText = baseCSS + `transform:scale(1); opacity: 0;`;

}, 5);

setTimeout(function() {

rippleEffect.remove();

//window.location.href = currentBtn.href;

}, 700);

})

}