▲TOPへ戻る

【CSS】テキストをグラデーション、アニメーションさせる方法

疑似要素

上の画像のように、テキストをアニメーションさせる方法について紹介します。

グラデーションをつくる

  .gradient-box {
    background-image: linear-gradient(
      90deg,
      rgba(247, 12, 12, 1),
      rgba(255, 248, 34, 1) 20%,
      rgba(39, 238, 73, 1) 40%,
      rgba(35, 202, 247, 1) 60%,
      rgba(147, 35, 247, 1) 80%,
      rgba(247, 35, 133, 1)
    );
  }

グラデーションは以下のジェネレーターで作れます。

CSSジェネレーター

グラデーションをアニメーションさせる

filter: hue-rotateanimation を使ってアニメーションさせます。

先ほどのbackground-image の下に以下を追加。

  .gradient-box {
    /* background-imageは省略 */
    filter: hue-rotate(360deg);
    animation: ani 15s infinite;
  }
  @keyframes ani {
    0%,
    100% {
      filter: hue-rotate(0deg);
    }
    50% {
      filter: hue-rotate(360deg);
    }
  }

参考

js
【CSS】filterの使い方 画像をぼかしたり、色の変化を適用させる

文字のストロークに適用させる

テキスト グラデーション
  <div class="wrapper">
    <div class="gradient-box">テキスト  グラデーション</div>
  </div>
  /* .wrapper のCSS 省略 */
  
  .wrapper .gradient-box {
    /* background-image 省略 */
    /* filter 省略 */
    /* animation 省略 */
    /* @keyframes 省略 */
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-stroke: 0.1em transparent;
  }

文字全体に適用させる

さらに、text-fill-color: transparent; の1行を追加すると、文字全体に適用させることができます。

テキスト グラデーション
  /* .wrapper のCSS 省略 */

.wrapper .gradient-box {
/* background-image 省略 */
/* filter 省略 */
/* animation 省略 */
/* @keyframes 省略 */
-webkit-background-clip: text;
background-clip: text;
-webkit-text-stroke: 0.1em transparent;
-webkit-text-fill-color: transparent; /* この1行を追加 */
}
point

background-image: linear-gradient でグラデーションさせる。

filteranimationでアニメーションさせる。

background-clip: text;text-stroke: 0.1em transparent; で文字ストロークに適用させる。

さらに、text-fill-color: transparent; で文字全体に適用させる。

profile

パソコン好きなガオ

コロナ禍によるステイホームを機にプログラミングを学ぶ。パソコンに関してはプロではないが、ちょっと詳しい程度。

パソコン

javascript

カメラ

ブログ