html点击按钮波纹效果,点击按钮波纹效果.html

点击按波纹效果

*{

margin: 0;

padding: 0;

font-family: "Open Hans";

}

body{

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

min-height: 100vh;

background: #040d15;

}

a{

position:relative;

display: inline-block;

padding: 12px 36px;

margin: 10px 0;

color: #ffffff;

text-decoration: none;

text-transform: uppercase;

font-size: 18px;

letter-spacing: 2px;

border-radius: 40px;

overflow: hidden;

background: linear-gradient(90deg, #0162c8, #55e7fc);

}

a:nth-child(2){

background: linear-gradient(90deg, #755bea, #ff72c0);

}

span{

position: absolute;

background: #fff;

transform: translate(-50%, -50%);

pointer-events: none;

border-radius: 50%;

animation: animate 1s linear infinite;

}

/* 添加动画效果 */

@keyframes animate{

0%{

width: 0px;

height: 0px;

opacity: 0.5;

}

100%{

width: 500px;

height: 500px;

opacity: 0;

}

}

Button

Button

// 鼠标点击啊a时，添加一个span

const buttons = document.querySelectorAll('a');

buttons.forEach(btn => {

btn.addEventListener('click', function(e){

let x = e.clientX - e.target.offsetLeft;

let y = e.clientY - e.target.offsetTop;

let ripples = document.createElement('span');

ripples.style.left = x + 'px';

ripples.style.top = y + 'px';

this.appendChild(ripples);

setTimeout(() => {ripples.remove()}, 1000)

})

})

一键复制

编辑

Web IDE

原始数据

按行查看

历史