【CSSサンプル】隠れた文字を照らし出すサーチライト【小ネタ】

　どうも！LSSです！！

先日、記事にいただいたコメントの返信を書いていた時に、ふと思いついてしまった小ネタがありました。

決して「使い勝手がいい」とは思わないですが、思いついてしまったものは仕方がありませんｗ

ちょっとした小ネタとして「こんな事もできるんだ」程度に見てやっていただければ、と思います^^

サーチライト

闇に描く君は
あの日のまま
僕に微笑みかける

コード

<style><!--
@keyframes scha{
0%{background-color:#000000;background-position:-1000px 0,1000px 0;}
10%{background-position:1000px 0,1000px 0;}
30%{background-position:-1000px 0,1000px 0;}
35%{background-position:0px 0,0px 0;}
50%{background-color:#000000;}
60%{background-color:#ffff00;background-position:0px 0,0px 0;}
61%{background-position:-1000px 0,1000px 0;}
70%{background-color:#000000;}
100%{background-color:#000000;background-position:-1000px 0,1000px 0;}
}
.sch{
--schc1:#ffff00ff;
--schc2:#ffff0000;
--schsz1:50%;
--schsz2:60%;
color:black;
text-align:center;
background-image:radial-gradient(circle at 50% 50%,var(--schc1) var(--schsz1),var(--schc2) var(--schsz2)),radial-gradient(circle at 50% 50%,var(--schc1) var(--schsz1),var(--schc2) var(--schsz2));
background-repeat:no-repeat;
animation:scha 40s linear 0s infinite;
}
--></style>
<div class="sch">隠された文字</div>

設定変更

--schc1:#ffff00ff;
--schc2:#ffff0000;
--schsz1:50%;
--schsz2:60%;

変更しやすい要素を、CSS変数で一か所にまとめました。

一番上の --schc1 はサーチライトの色で、#ffff00（黄色）を不透過度 ff（全く透明でない）としています。

二つめの --schc2 はサーチライトの外側の色で、#ffff00（黄色）を不透過度 00（完全に透明）としています。

みっつめの --schsz1 はサーチライトの内側のサイズ、
よっつめの --schsz2 はサーチライトの外側のサイズ、
50%と60%にしていますが、この間の10%部分が「黄色から透明（背景色：黒）へのグラデーション」となります。 

「隠された文字」のサイズが合わない場合にサイズ調整できます。 

元記事

ギャクバリさん(id:minimalist_gyakubari)からいただいたコメントから思いつきました。

ありがとうございます^^

逆のほうが良かったかも…

今回は、ライトの部分が「見えるようになる実際の色」で、外側を「透明色」としていますが、逆にしたほうが良かったかな？
…という気が ここまで書いてからしてきましたｗ 

「隠れている」のが、文字色と背景色が同じ黒だから、という事に頼っていますが、逆にしておけば色つきの内容であっても扱えますし、画像なんかも使えるって事になります。

第二弾を作る事があったら、考える事にしましょうか^^

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

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