SOURCE

<div class="dynamic-gradient-background"></div>
<h1 class="gradient-text">渐变动效文字</h1>
<div class="margin"></div>


<!-- <div class="blob-outer-container">
    <div class="blob-inner-container">
        <div class="blob"></div>
    </div>
</div>
<div class="home-page">
    <div class="content">
    </div>
</div> -->

.dynamic-gradient-background {
  width: 100%;
  height: 300px; /* 根据需要调整高度 */
  background: linear-gradient(45deg, #ffffff, #f5e6fa, #d4f3ff);
  background-size: 400% 400%; /* 增大背景尺寸以允许平滑过渡 */
  animation: dynamicGradient 5s ease-in-out infinite;
}

@keyframes dynamicGradient {
  0% {
    background-position: 0% 0%;
  }
  25% {
    background-position: 100% 0%;
  }
  50% {
    background-position: 100% 100%;
  }
  75% {
    background-position: 0% 100%;
  }
  100% {
    background-position: 0% 0%;
  }
}

.margin {
    margin-top: 300px;
}

.gradient-text {
  font-size: 48px;
  font-weight: bold;
  background-image: linear-gradient(45deg, red, orange, yellow, green, blue, indigo, violet);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradientMove 10s ease-in-out infinite;
}

@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}


* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    outline: 0;
    font-family: sans-serif;
}

.home-page {
    background-color: #fff;
    height: 100vh;
    display: grid;
    place-items: center;
}

.content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 1;
}

.content .quote {
    color: white;
    font-weight: bold;
    font-style: italic;
    font-size: 64px;
    padding: 10px;
    background-color: #fff;
    border-radius: 10px;
}

.content .by {
    color: #00e1ff;
}

.blob-outer-container {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: 0;
    inset: 0;
    margin: auto;
    transform: translateY(50%); 
    filter: blur(100px);
    opacity: 0.5;
}

.blob-inner-container {
    border-radius: 99999px;
    border-radius: 9px;
    position: absolute;
    inset: 0;
    margin: auto;
    width: 100vw;
    height: 100vh;
    /* min-width: 1000px; */
    overflow: hidden;
    background-color: #fff;
    transform: scale(0.8);
}

.blob {
    position: absolute;
    width: 100vw;
    height: 100vh;
    inset: 0;
    margin: auto;
    background: conic-gradient(from 0deg, #08f, #f60, #bbffa1, #4c00ff, #ab2666, #09f);
    animation: spinBlob 8s linear infinite;
}

@keyframes spinBlob {
    0% {
        transform: rotate(0deg) scale(3);
    }

    100% {
        transform: rotate(1turn) scale(3);
    }
}