スコープ設定のカスタム プロパティと 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);
}
使用する色のカスタム プロパティを 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)