【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)
);
}
グラデーションは以下のジェネレーターで作れます。
グラデーションをアニメーションさせる
filter: hue-rotateとanimation を使ってアニメーションさせます。
先ほどの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);
}
}
参考

文字のストロークに適用させる
<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行を追加 */
}

background-image: linear-gradient でグラデーションさせる。
filterとanimationでアニメーションさせる。
background-clip: text;とtext-stroke: 0.1em transparent; で文字ストロークに適用させる。
さらに、text-fill-color: transparent; で文字全体に適用させる。
こんな記事も読まれています。
-
【CSS】box-sizing: border-boxとは?指定するメリットは?
CSSのbox-sizing: border-boxについて解説します。指定することによりレイアウトしやすくなります。また、親要素からはみ出すことも防げます。
-
【CSS】box-sizing: border-boxとは?指定するメリットは?
CSSのflexboxで上下左右、中央の配置の方法について説明します。justify-contentで左右の配置を、align-itemsで上下の配置を決めます。flex-start,center,flex-endの使い方。
- リンク
-
【CSS】transformのrotateとtransform-originについて。回転させる基点を変える
CSSのrotateについて解説します。指定によりZ軸、X軸、Y軸で回転させます。またtarnsform-originを指定することにより、回転する基点を移動させることができます。
-
【CSS】filterの使い方 画像をぼかしたり、色の変化を適用させる
【CSS】filterの使い方について解説します。画像をぼかしたり、色の変化を適用させるには? brightness、contrast、drop-shadow、grayscale、hue-rotate、invert、saturate、sepiaの設定方法
- リンク
-
【CSS】perspective と transform-style で3D表現。立方体を作ってみよう。
CSSのperspectiveとtransform-styleについて解説します。CSSだけで3Dを表現できます。立方体をつくり、それを応用する方法も紹介します。
-
【CSS】animation パート2 アニメーションの動き(time-function),遅延時間(delay),方向(direction)について
【CSS】animation のアニメーションの動き(time-function),遅延時間(delay),方向(direction)について解説します。。
- リンク
-
【css】grid-templateでtwitter風に画像を表示させる方法
grid-templateを使えば、画像を思い通りに配置できます。twitter風に画像を表現することができます。
-
リンク
-
【CSS】マウスを乗せた(ホバーした)時、サムネイル画像を拡大・縮小する方法
CSSでマウスをホバーした時、サムネイル画像を拡大・縮小する方法。overflow: hiddenやtransform: scale();を使い、拡大、縮小させます。