css点击按钮出现水波纹效果

按钮水波纹

<!DOCTYPE html>
>
>
  -8">
  -width, initial-scale=1.0">
  >动画效果示例>


  >

    .ripple-button {
      position: relative;
      overflow: hidden;
      padding: 12px 24px;
      background-color: #6200ee;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
      outline: none;
    }

    .ripple-button::after {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      width: 5px;
      height: 5px;
      background: rgba(255, 255, 255, 0.5);
      opacity: 0;
      border-radius: 100%;
      transform: scale(1, 1) translate(-50%, -50%);
      transform-origin: 50% 50%;
    }

    .ripple-button:focus:not(:active)::after {
      animation: ripple 1s ease-out;
    }

    @keyframes ripple {
      0% {
        transform: scale(0, 0);
        opacity: 0.5;
      }
      20% {
        transform: scale(25, 25);
        opacity: 0.3;
      }
      100% {
        opacity: 0;
        transform: scale(40, 40);
      }
    }

  >
>
>
.ripple-button:focus:not(:active)::after {
      animation: ripple 1s ease-out;
    }

这段CSS代码的作用是:当按钮获得焦点(如通过Tab键导航或点击)但不处于激活状态(未被按下)时,对其伪元素 ::after 应用水波纹动画效果。

详细解释:

  • .ripple-button:focus

选择器匹配获得焦点的按钮(例如通过键盘Tab键聚焦或鼠标点击后)。

  • :not(:active)

排除按钮处于激活(按下)状态的情况。这样水波纹动画只会在按钮被聚焦但未被按下时触发。

  • ::after

针对按钮的伪元素应用样式,这个伪元素将作为水波纹的视觉元素。

  • animation: ripple 1s ease-out

应用名为 ripple 的关键帧动画,持续1秒,使用 ease-out 缓动函数(动画开始时快,结束时慢)。

你可能感兴趣的:(css,css,前端)