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 より）