css文本水波效果

news2025/1/17 21:42:25

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>文本水波效果</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Poppins", sans-serif;
      }
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #e8e8e8;
      }
      .content {
        position: relative;
      }
      .content h2 {
        position: absolute;
        transform: translate(-50%, -50%);
        font-size: 15em;
      }
      .content h2:nth-child(1) {
        color: transparent;
        /* 描边 */
        -webkit-text-stroke: 3px #000;
        /* 模糊 */
        filter: blur(3px);
      }
      .content h2:nth-child(3) {
        color: #fff6;
        filter: drop-shadow(0 15px 15px #fff);
        z-index: 1;
        text-shadow: -15px 15px 15px rgba(0, 0, 0, 0.2),
          15px -15px 15px rgba(255, 255, 255, 0.2);
      }
      .content h2:nth-child(2) {
        color: #03a9f4;
        z-index: 2;
        animation: animate 4s ease-in-out infinite;
      }
      @keyframes animate {
        0%,
        100% {
          clip-path: polygon(
            0% 45%,
            7% 42%,
            13% 40%,
            20% 41%,
            26% 42%,
            32% 46%,
            37% 51%,
            44% 53%,
            51% 55%,
            55% 60%,
            64% 60%,
            71% 62%,
            80% 62%,
            84% 59%,
            90% 57%,
            94% 56%,
            98% 54%,
            100% 51%,
            100% 100%,
            0% 100%
          );
          -webkit-clip-path: polygon(
            0% 45%,
            7% 42%,
            13% 40%,
            20% 41%,
            26% 42%,
            32% 46%,
            37% 51%,
            44% 53%,
            51% 55%,
            55% 60%,
            64% 60%,
            71% 62%,
            80% 62%,
            84% 59%,
            90% 57%,
            94% 56%,
            98% 54%,
            100% 51%,
            100% 100%,
            0% 100%
          );
        }
        50% {
          clip-path: polygon(
            0% 63%,
            4% 61%,
            9% 63%,
            14% 66%,
            20% 67%,
            29% 67%,
            36% 67%,
            45% 64%,
            52% 60%,
            60% 57%,
            67% 54%,
            74% 53%,
            79% 49%,
            85% 47%,
            89% 47%,
            94% 44%,
            96% 41%,
            100% 37%,
            100% 100%,
            0% 100%
          );
          -webkit-clip-path: polygon(
            0% 63%,
            4% 61%,
            9% 63%,
            14% 66%,
            20% 67%,
            29% 67%,
            36% 67%,
            45% 64%,
            52% 60%,
            60% 57%,
            67% 54%,
            74% 53%,
            79% 49%,
            85% 47%,
            89% 47%,
            94% 44%,
            96% 41%,
            100% 37%,
            100% 100%,
            0% 100%
          );
        }
      }
    </style>
  </head>
  <body>
    <div class="content">
      <h2>Water</h2>
      <h2>Water</h2>
      <h2>Water</h2>
    </div>
  </body>
</html>