点击按钮出现波纹散开效果

 

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;
        }
    }
}