【CSS】瞬く星空
どうも！LSSです！！
今回はまた、CSSのkeyframesアニメーションで遊んでみました。
瞬く星空
瞬く星空
コード
<style>
@keyframes twstara{
0%{background-position:0px 0px,0px 0px,0px 0px;}
100%{background-position:0px 0px,0px 0px,0px 300px;}
}
.twstar{
height:300px;
background-image:
repeating-linear-gradient(45deg,black 0px 11px,transparent 13px,black 15px 30px),
repeating-linear-gradient(135deg,black 0px 11px,transparent 13px,black 15px 30px),
repeating-linear-gradient(20deg,black 0px 24px,lightblue 27px,white 36px,#ffff88 45px,black 48px);
animation:twstara 40s linear infinite;
color:white;
font-weight:bold;
font-size:150%;
padding:10px;
}
</style>
<div class="twstar">瞬く星空</div>
- コード中２か所でてくる「300px」は、この「瞬く星空」の高さです。
変更可能ですが、数値は合わせておいたほうが良いです。 - オレンジ太字部分は星空の動きと関係のない、余白や文字に関する指定です。
- 赤太字部分は好きな文言に変えて使ってください^^
星が瞬く仕組み
repeating-linear-gradientで３枚の画像を描き、重ね合わせています。
１枚目（黒い部分は塗りつぶし、白い部分は透過です。）
２枚目（黒い部分は塗りつぶし、白い部分は透過です。）
この２枚を重ねて表示すると、
こんな模様になります。（白い部分は透過）
その２枚の下に、３枚目（これは透過無し）
を敷き、この画像のみkeyframesアニメーションで上から下に移動させています。
この３枚目の縞模様を、１枚目＋２枚目の透過点から覗く事になります。
すると、
縞模様の黒い部分が来た箇所は星が消え、縞模様が移動する事で現れたり消えたりを繰り返すんですね。
というネタを考えたのですが
ふと気づくと、七夕が近いので「時節ネタCSS」って事にしておきましょうかｗ
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
