CSS3を使用してフォントカラーグラデーションを実装する

Animation.css を使うと公式サイトのフォントがだんだんと変わっていくのが分かりました。css を見てみたらとても面白かったです。

  .サイト__タイトル{
    色: #f35626;
    背景画像: -webkit-linear-gradient(92deg, #f35626, #feab3a);
    -webkit-background-clip: テキスト;
    -webkit-テキストの塗りつぶし色: 透明;
    -webkit-animation: 色相 60 秒 無限線形;
  }
@-webkit-keyframes 色相 {
    から {
      -webkit-filter: 色相回転(0度);
    }
    に {
      -webkit-filter: 色相回転(-360度);
    }
  }

ここでは、-webkit-background-clip: text を使用して背景画像を切り取り、テキスト部分のみを残します。

次に、-webkit-text-fill-color: transparent を使用して、テキストの塗りつぶし色を透明に設定します。

色相アニメーションを使用して、60 秒以内に色相を 0 度から -360 度まで調整し、時間の経過とともにフォントの色が変化する効果を実現します。

CSS3 を使用してフォント カラー グラデーションを実装する方法についての記事はこれで終わりです。CSS3 フォント カラー グラデーションに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。