どうも！LSSです！！
ふと思いついて、CSSで流星群を作ってみました。
流星群
流星群をCSSで作ってみました。
コード
<style>
@keyframes stardusta{
0%{background-position:0 0,5000px 0,0 0;}
100%{background-position:0 0,0 0,0 0;}
}
.stardust{
height:200px;
background-image:
repeating-linear-gradient(135deg,#000000 0px 9px,#00000000 10px 13px,#000000 14px 100px),
repeating-linear-gradient(45deg,#000000 0px 132px,#00000000 133px 136px,#000000 137px 141px),
linear-gradient(#ffffbb,#000000);
animation:stardusta 20s linear infinite;
padding:10px;
color:white;
}
</style>
<div class="stardust">流星群をCSSで作ってみました。</div>
あとがき
その昔（HTML4.0の時代）に、JavaScriptを使って流星群を作ってみた事がありましたが、「CSSだけでそれっぽい事ができないかな？」と試みたのが今回のコードです。
仕掛けとしては、
の応用になります。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
