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

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

Jhey Tompkins

切換至 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-clip 屬性需要前置字串為 -webkit-background-clip。

此時，您可以將其留在該位置，並嘗試使用 background-position 和 background-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;
    }
  }
}

太棒了！🎉? 你已使用限定範圍自訂屬性和 background-clip，透過 CSS 建立一些動畫漸層文字。

這是簡短的影片形式，可分享這個秘訣！⚡️

偏好使用 Tweet 表單嗎？🐦

時時刻刻享受精彩時刻！ GMT •ᴥ• VP

主頁橫幅由 Vladislav Klapin 在 Unsplash 上提供