Little Strange Software

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

【CSSサンプル】text-shadowが霧散するサンプルを作ってみました【小ネタ】

 どうも!LSSです!!

 

【CSSサンプル】ふりむきカーン【ほぼジョークw】 - Little Strange Software

でoutlineのオーラが広がって消えていくものを作りましたが、

「text-shadowとanimationを使えば、文字がまとったオーラが動く様子が表現できるのでは?」

と、試してみました^^

 

 

text-shadowが霧散するサンプル

さぁ、夏のあつさを、ふきとばそう!

  

 

コード

<style><!--
@keyframes txtshda{
0%{text-shadow:0px 0px 10px #ff0000;}
70%{text-shadow:0px 0px 10px #ff0000;}
100%{text-shadow:0px 0px 100px #ff0000;}
}
.txtshd{
font-weight:bold;
font-size:150%;
animation:txtshda 3s linear 0s infinite alternate;
}
--></style>
<p>さぁ、<span class="txtshd">夏のあつさ</span>を、ふきとばそう!</p>

 

 

ちょびっとコード解説

@keyframes txtshda{
0%{text-shadow:0px 0px 10px #ff0000;}
70%{text-shadow:0px 0px 10px #ff0000;}
100%{text-shadow:0px 0px 100px #ff0000;}
} 

がアニメーションや影の大きさ・色を指定している部分になります。

3つある#ff0000が色を指定している部分で、好きに変更する事ができます^^

(広がると薄くなるので、色選びに苦戦した挙句に、サンプルでは赤に落ち着きましたw) 

この3つの色は別々の色に指定する事もでき、その場合は色が変化する様子を楽しむ事もできますね。

「経過時間のうち開始(0%)から70%経過までは、ぼかし10pxの状態を維持し、70%から最後(100%)の間に急激にぼかし100px(ほとんど見えないほど広がり薄まった状態)に変化させる」というもの、という事になります^^

 

アニメーションの速度は

animation:txtshda 3s linear 0s infinite alternate;

3sの部分で指定でき、この指定では「3秒」を指定している事になります。

 

 

 

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

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