Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【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】テキスト装飾によく使うプロパティ おさらいとサンプル集

 その更に元ネタ(グラデーション文字についての解説つき)は

【CSS】グラデーション文字を作ってみました!

 

このグラデーション文字、
「背景として指定したグラデーションを、文字部分のみに表示させるようにする」
というものでした。

 

そして今回思いついたのは、
「その背景として指定したものをキーフレームアニメーションで動かせるのかな?」
というものでしたが、すんなり動いてくれましたね^^

※元の「きんきらきんのきーん」には微妙に角度をつけていましたが、それをそのまま動かすと境目がちょっと残念だったので、キリのいい90degにしています。

 

 

とりあえず試してみただけですが

他のグラデーション文字も同様に動かせるので、また何か面白い表現ができそうですね^^

 

コード中の
linear-gradient(90deg, brown,yellow,white,yellow,brown);
の部分を差し替えるだけでいけそうです!

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^