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

原创于 2025-06-23 10:28:40 发布 · 247 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端

css 专栏收录该内容

31 篇文章

订阅专栏

按钮水波纹

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>动画效果示例</title>


  <style>

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

  </style>
</head>
<body>
<button class="ripple-button">点击我</button>




</body>

<script>


</script>
</html>

.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 缓动函数（动画开始时快，结束时慢）。