【CSS】グラデーション文字をアニメーションしてみました
どうも！LSSです！！
かなり前の記事のネタに、ちょっと思いついた事の追加を試してみました。
グラデーション文字のアニメーション
きんきらきんのきーん
コード
<style><!--
@keyframes goldanm{
0%{background-position:0px 0px;}
100%{background-position:2000px 0px;}
}
.golda{
font-size: 50px;
font-weight: bold;
color: gold;
background-image:
linear-gradient(90deg, brown,yellow,white,yellow,brown);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation:goldanm 10s ease-in-out 0s alternate infinite;
}
--></style>
<p style="background-color: gray; text-align: center;"><span class="golda">きんきらきんのきーん</span></p>
元ネタ
【CSS】テキスト装飾によく使うプロパティ おさらいとサンプル集
その更に元ネタ（グラデーション文字についての解説つき）は
このグラデーション文字、
「背景として指定したグラデーションを、文字部分のみに表示させるようにする」
というものでした。
そして今回思いついたのは、
「その背景として指定したものをキーフレームアニメーションで動かせるのかな？」
というものでしたが、すんなり動いてくれましたね^^
※元の「きんきらきんのきーん」には微妙に角度をつけていましたが、それをそのまま動かすと境目がちょっと残念だったので、キリのいい90degにしています。
とりあえず試してみただけですが
他のグラデーション文字も同様に動かせるので、また何か面白い表現ができそうですね^^
コード中の
linear-gradient(90deg, brown,yellow,white,yellow,brown);
の部分を差し替えるだけでいけそうです！
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
