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);
}

使用する色のカスタム プロパティを 2 つ作成します。これらの色を使用して background に linear-gradient を適用し、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-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 でアニメーション化されたグラデーション テキストを作成しました。

こちらのスピーディな動画で、このヒントをご覧ください。⚡️

これをご希望の場合、ツイートフォームでお知らせください。🐦

いつも最高の写真を

ヒーロー画像（作成者: Vladislav Klapin、Unsplash）