Article

动画 - 涟漪

Lawrence

|Reading time

动画 - 涟漪

本教程展示通过 CSS 创建涟漪动画

**实现思路**

使用伪元素 `::before` 和 `::after` 创建两个扩散圆环
圆环从按钮边缘开始，向外扩散并淡出
两个圆环使用不同延迟，形成连续的波纹效果


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh
    }

    .ripple-btn {
      position: relative; /* 为伪元素提供定位参照 */
      padding: 12px 28px;
      font-size: 16px;
      color: #fff;
      background: #667eea;
      border: none;
      border-radius: 8px;
      cursor: pointer;
    }

    /* 涟漪效果 */
    .ripple-btn::before,
    .ripple-btn::after {
      content: ''; /* 必须设置，内容为空 */
      position: absolute; /* 相对于按钮定位 */
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      background: rgba(102, 126, 234, 0.6); /* 涟漪颜色 */
      border-radius: 8px;
      transform: translate(-50%, -50%); /* 居中定位 */
      filter: blur(4px); /* 模糊效果，让涟漪更柔和 */
      animation: ripple 2s ease-out infinite; /* 播放动画 */
      pointer-events: none; /* 避免阻挡鼠标事件 */
      z-index: -1; /* 位于按钮下方，不遮挡按钮内容 */
    }

    .ripple-btn::after {
      animation-delay: 0.6s; /* 延迟 0.6s 播放，形成交替效果 */
    }

    @keyframes ripple {
      0% {
        width: 100%;
        height: 100%;
        opacity: 0.5;
      }
      100% {
        width: 160%;
        height: 160%;
        opacity: 0;
      }
    }
  </style>
</head>
<body>
  <button class="ripple-btn">Playing</button>
</body>
</html>

Read-only

Open Sandbox