どうも！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)からいただいたコメントから思いつきました。
ありがとうございます^^
逆のほうが良かったかも…
今回は、ライトの部分が「見えるようになる実際の色」で、外側を「透明色」としていますが、逆にしたほうが良かったかな？
…という気が ここまで書いてからしてきましたｗ
「隠れている」のが、文字色と背景色が同じ黒だから、という事に頼っていますが、逆にしておけば色つきの内容であっても扱えますし、画像なんかも使えるって事になります。
第二弾を作る事があったら、考える事にしましょうか^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
