どうも！LSSです！！
このブログで、
などの「最初は表示されていないけど、ユーザーアクションによって表示される隠し文字」ネタを、これまでもいくつかご紹介してきました。
今回の記事のものも、その一種と言えそうですが、ちょっと変わり種です^^
ちょっと言いにくい話なんですけど…
ちょっと、言いにくい話なんですけど、実は…ただこれだけの小ネタなんですよね。あえてぼかしておきますが、知りたい人はボカシ部分にマウスカーソルをあわせてみてください。
コード
<style><!--
.txsd{
color:transparent;
text-shadow:0px 0px 10px #000;
transition:0.5s;
}
.txsd:hover{
text-shadow:0px 0px 0px #000;
}
--></style>
<p>ちょっと、言いにくい話なんですけど、実は…<span class="txsd">ただこれだけの小ネタ</span>なんですよね。あえてぼかしておきますが、知りたい人はボカシ部分にマウスカーソルをあわせてみてください。</p>
このコードをコピペし、色付き文字部分を好きな文章に書き換えてご利用ください^^
赤太字部分にボカシがかかります。
ざっくりコード解説
まず、
color:transparent;
で、文字色を「透明」にしています。
この指定だと、背景色が何色であっても、文字は表示されない、という事になります。
そして、
text-shadow:0px 0px 10px #000;
で10px幅のぼかしをかけた影（色は#000＝黒）をつけています。
文字が透明なので、影だけが見えている、という状態ですね。
ですが、ぼかしが強すぎて文字の判別ができない、という状態ですｗ
その次の、
transition:0.5s;
は、変化にかける時間を指定しています。
この指定では、変化が生じた時に0.5秒の時間をかけて徐々に変化する、という指定になります。
.txsd:hover{
text-shadow:0px 0px 0px #000;
}
:hoverをつけているので、こちらは「マウスカーソルがのった時」の指定になります。
text-shadowの指定はほぼ同じですが、ぼかしのサイズ部分だけが10px→0pxに変えてあるので、全くぼけていない引き締まった影になります。
あとがき
text-shadowプロパティ、指定項目が多いからなんとなくアニメーションの対象にならないかも？と思いましたが、しっかりアニメーションしてくれていますね^^
…と思ってたら、実は
の中にある「影分身！」で既にtext-shadowのアニメーション、やってましたｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
