どうも!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秒」を指定している事になります。
ってなとこで、今回はこのへんで!
次回もまた、よろしくお願いします^^