效果图:
代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> * { margin: 0; padding: 0; } body { background: rgb(0, 0, 0, 0.8); } div{ position: absolute; left: 0; right: 0; bottom: 0; top: 0; margin: auto; border-radius: 30px; text-align: center; line-height: 50px; width: 140px; height: 50px; overflow: hidden; /*禁止双击页面选中文本*/ user-select:none; background: linear-gradient(to left, #6be585, #dd3e54); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ } span { position: absolute; background: #fff; /*加上事件穿透,可以一直点击按钮*/ pointer-events: none; border-radius: 50%; /*平移span标签,平移到中心的位置*/ transform: translate(-50%,-50%); animation: animation 1s linear infinite; } @keyframes animation { 0% { width: 0; height: 0; opacity: 0.5; } 100% { width: 300px; height: 300px; opacity: 0; } } </style> <body> <div>Button</div> </body> <script> //获取div按钮 const btn = document.querySelector("div"); //绑定单击事件 => 也可以切换成悬停事件mouseover btn.addEventListener('click', function (e) { //定位获取鼠标点击的x,y轴, //clientX 指的就是根据当前屏幕定位到的x轴 //e.target.offsetLeft 当前的容器的左边到屏幕最左边的距离 //相减就会得到我们要的span的left的距离 let x = e.clientX - e.target.offsetLeft; let y = e.clientY - e.target.offsetTop; //创建一个span标签 let span = document.createElement("span"); //将得到的left值和top值带进span的样式中去 span.style.left = x + "px"; span.style.top = y + "px"; //单击按钮新增一个span标签 this.appendChild(span); //一秒后移除掉添加的span标签 setTimeout(() => { span.remove(); }, 1000) }) </script> </html>
标签:水波纹,特效,span,标签,height,background,按钮,left From: https://www.cnblogs.com/zsbb/p/16772044.html