const handleClick = (event: MouseEvent) => { const button = event.currentTarget as HTMLElement; // 计算点击位置 const rect = button.getBoundingClientRect(); const x = event.clientX - rect.left; const y = event.clientY - rect.top; // 创建一个新的水波纹元素 const ripple = document.createElement('span'); ripple.style.left = `${x}px`; ripple.style.top = `${y}px`; // 将水波纹元素添加到按钮中 button.appendChild(ripple); // 触发水波纹动画 ripple.classList.add('ripple'); // 动画结束后移除水波纹元素 setTimeout(() => { ripple.remove(); }, 500); };
点击事件下面是css样式
.button-style { border-width: 0 !important; box-shadow: 0 1px 4px 0 rgba(80, 110, 228, 0.5) !important; background: linear-gradient(14deg, #506ee4 0%, rgba(80, 110, 228, 0.6)) !important; position: relative; overflow: hidden; z-index: 1; // &::before { // content: ''; // position: absolute; // top: 0; // left: 0; // width: 100%; // 确保伪元素覆盖整个按钮 // height: 100%; // 确保伪元素覆盖整个按钮 // background: rgba(255, 255, 255, 0.2); // 白色半透明遮罩 // opacity: 0; // transition: opacity 0.3s ease-in-out; // z-index: 2; // 确保遮罩层在按钮内容之上 // pointer-events: none; // 防止遮罩层影响按钮的点击和悬停事件 // } // &:hover::before { // opacity: 1; // } &>span.ripple { position: absolute; width: 0; height: 0; background: rgba(255, 255, 255, 0.5); // 白色半透明遮罩 border-radius: 50%; transform: translate(-50%, -50%); animation: ripple 0.5s ease-out forwards; } @keyframes ripple { to { width: 200px; height: 200px; opacity: 0; } } }
标签:水波纹,遮罩,const,点击,按钮,ripple,波纹,255 From: https://www.cnblogs.com/liziqian001/p/18522114