Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【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>

 

  • コード中2か所でてくる「300px」は、この「瞬く星空」の高さです。
    変更可能ですが、数値は合わせておいたほうが良いです。
  • オレンジ太字部分は星空の動きと関係のない、余白や文字に関する指定です。
  • 赤太字部分は好きな文言に変えて使ってください^^

 

 

星が瞬く仕組み

repeating-linear-gradientで3枚の画像を描き、重ね合わせています。

 

1枚目(黒い部分は塗りつぶし、白い部分は透過です。)

 

 

2枚目(黒い部分は塗りつぶし、白い部分は透過です。)

 

 

この2枚を重ねて表示すると、

 

こんな模様になります。(白い部分は透過)

 

その2枚の下に、3枚目(これは透過無し)

 

を敷き、この画像のみkeyframesアニメーションで上から下に移動させています。

 

この3枚目の縞模様を、1枚目+2枚目の透過点から覗く事になります。
すると、

 

縞模様の黒い部分が来た箇所は星が消え、縞模様が移動する事で現れたり消えたりを繰り返すんですね。

 

 

というネタを考えたのですが

ふと気づくと、七夕が近いので「時節ネタCSS」って事にしておきましょうかw

 

 

 

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

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