原代码在这里 https://codepen.io/kevinhufnagl/pen/mdVvvwj

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/d7e1b45e-2f7e-4c15-8798-12fea2011a09/Untitled.png

<html>

<head>
  <title>Vercel like text gradient transition</title>
  <style>
    :root {
      --gradient-color-1: #ef008f;
      --gradient-color-2: #6ec3f4;
      --gradient-color-3: #7038ff;
      --gradient-color-4: #c9c9c9;
    }
     .process-step-title-container {
      margin-top: -16px;
      position: relative;
    }
    .process-step-title,
    .process-step-title-overlay {
      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      font-size: 156px;
      font-weight: 900;
      margin: 0;
      line-height: 1.2em;
      letter-spacing: -4px;
    }

    .process-step-title-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: auto;
      padding-right: 30px;
      height: 100%;
      opacity: 1;
      -webkit-text-fill-color: transparent;
      -webkit-background-clip: text;
    }

    .process-step-1 .process-step-title-overlay {
      background-image: linear-gradient(90deg, var(--gradient-color-1), var(--gradient-color-2));
      animation: animated-gradient-title-1 8s infinite;
    }

    .process-step-2 .process-step-title-overlay {
      background-image: linear-gradient(90deg, var(--gradient-color-2), var(--gradient-color-3));
      animation: animated-gradient-title-2 8s infinite;
    }

    .process-step-3 .process-step-title-overlay {
      background-image: linear-gradient(90deg, var(--gradient-color-3), var(--gradient-color-1));
      animation: animated-gradient-title-3 8s infinite;
    }

    @keyframes animated-gradient-title-1 {
      0%,
      16.667%,
      100% {
        opacity: 1;
      }
      33.333%,
      83.333% {
        opacity: 0;
      }
    }

    @keyframes animated-gradient-title-2 {
      0%,
      16.667%,
      66.667%,
      100% {
        opacity: 0;
      }
      33.333%,
      50% {
        opacity: 1;
      }
    }

    @keyframes animated-gradient-title-3 {
      0%,
      50%,
      100% {
        opacity: 0;
      }
      66.667%,
      83.333% {
        opacity: 1;
      }
    }
  </style>
</head>

<body>
  <section class="section-process">
    <div class="section-container">
      <div class="process-steps-container container-medium with-padding">
        <div class="process-step-container process-step-1">
          <div class="process-step-title-container">
            <h1 class="process-step-title">Plan</h1>
            <div class="process-step-title-overlay">Plan</div>
          </div>
        </div>
        <div class="process-step-container process-step-2">
          <div class="process-step-title-container">
            <h1 class="process-step-title">Design</h1>
            <div class="process-step-title-overlay">Design</div>
          </div>
        </div>
        <div class="process-step-container process-step-3">
          <div class="process-step-title-container">
            <h1 class="process-step-title">Develop</h1>
            <div class="process-step-title-overlay">Develop</div>
          </div>
        </div>
      </div>
    </div>
  </section>
</body>

</html>