快速處理 CSS 的秘訣!動畫漸層文字

讓我們使用範圍限定的自訂屬性和 background-clip,製作動畫漸層文字效果

前往 CodePen 並建立新的筆記。

建立文字的標記。我們來使用標題,標題中包含「Speedy」這個字詞:

<h1 class="boujee-text">Hello!</h1>

接著,讓我們為 body 提供較深色的 background-color

body {
  display: grid;
  place-items: center;
  min-height: 100vh;
  background: hsl(0 0% 20%);
}

提高文字的 font-size 使用 clamp 讓它回應式:

.boujee-text {
  font-size: clamp(3rem, 25vmin, 8rem);
}

為要使用的顏色建立兩個自訂屬性。使用這些顏色將 linear-gradient 套用至 background,並旋轉 90 度:

.boujee-text {
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / 100% 100%;
}

建立可用於水平背景大小的自訂屬性。用途:background-size-x

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
}

如要將背景裁剪成文字,請將 color 設為 transparent,並設定 background-clip: text

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

此時,您可以保留這個值,並嘗試使用 background-positionbackground-image 中使用的漸層。或者,您也可以為文字加上漸層動畫效果。首先,請為動畫定義主要畫面格。這會使用您先前定義的 --bg-size 自訂屬性。範圍限定自訂屬性可讓您更輕鬆地進行維護,這就是很好的例子。

@keyframes move-bg {
  to {
    background-position: var(--bg-size) 0;
  }
}

然後使用 animation 套用動畫:

.boujee-text {
  --bg-size: 400%;
  --color-one: hsl(15 90% 55%);
  --color-two: hsl(40 95% 55%);
  font-size: clamp(3rem, 25vmin, 8rem);
  background: linear-gradient(
                90deg,
                var(--color-one),
                var(--color-two),
                var(--color-one)
              ) 0 0 / var(--bg-size) 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
  animation: move-bg 8s infinite linear;
}

如要進一步調整,您可以在媒體查詢中包裝動畫程式碼,以便尊重使用者對動畫的偏好設定:

@media (prefers-reduced-motion: no-preference) {
  .boujee-text {
    animation: move-bg 8s linear infinite;
  }
  @keyframes move-bg {
    to {
      background-position: var(--bg-size) 0;
    }
  }
}

完成!🎉? 您已使用 CSS 和 background-clip 建立了一些漸層文字動畫。

以下是這項秘訣的快速影片!⚡️

是否偏好以推文形式提供這項資訊?🐦?

祝你玩得開心!ʕ •ᴥ•ʔ

主頁橫幅圖片由 Vladislav Klapin 提供,取自 Unsplash