どうも！LSSです！！
先日、【CSS】流星群というCSSアニメーションネタを公開しました。
光の点が斜めに移動する、というものでしたが
の影響を受け、「尾を引いて線状になった流れ星」を自分なりに考えてみました^^
また流星群
コード
<style>
@keyframes shtstra{
0%{background-position-y:0,100%;}
50%,100%{background-position-y:0,0%;}
}
@keyframes shtstrb{
0%,10%{background-position-x:0px,100%;}
20%,30%{background-position-x:200px,100%;}
40%,50%{background-position-x:100px,100%;}
60%,70%{background-position-x:250px,100%;}
80%,90%{background-position-x:150px,100%;}
}
.shtstr{
height:200px;
background-image:
repeating-linear-gradient(135deg,#000000 0% 49%,#00000000 50%,#000000 51% 100%),
linear-gradient(#000000 0% 33%,#ffff88 66%,#000000 67% 100%);
background-size:100% 100%,100% 300%;
animation:shtstra 1.4s linear infinite,shtstrb 7s linear infinite;
}
</style>
<div class="shtstr"> </div>
仕組み
二種類のグラデーションを重ねて表示し、下のグラデーションは上から下に、上のグラデーションは右に行ったり左に行ったり、を動作タイミングが重ならないようにしています。
上のグラデーションには透過色のスリットが入っており、そのスリットから下のグラデーションが見えている、という感じですね。
それぞれ別々に見てみると、以下のようなものです。
上のグラデーションと その動き（白く見える部分は透過です）
下のグラデーションとその動き（上が移動している時は真っ黒のため、上グラデの横移動は視認されません）
この２枚を重ね、上のグラデーションのスリットから下の黄色が落ちていく様子を覗くと、流れ星として見える事になります^^
余談ですが、「下のグラデーション」は、
↑こういうイメージ（上から1/3は真っ黒、中央の1/3は黒→薄黄色のグラデ、下1/3も真っ黒）を「縦に3倍（300%）」に伸ばしたものを使用しています。
あとがき
アニメーションの静止と移動のタイミングを分け「縦移動している時は横移動せず、横移動している時は縦移動しない」とする事で星の軌道が歪む事なく、まっすぐ斜め落下しつつも都度位置が変わる、というのを実現しました。
縦移動のアニメーション（前半は動、後半は静）
@keyframes shtstra{
0%{background-position-y:0,100%;}
50%,100%{background-position-y:0,0%;}
}
横移動のアニメーション（再生時間は縦の５倍を指定、静動静動静動静動静動の順）
@keyframes shtstrb{
0%,10%{background-position-x:0px,100%;}
20%,30%{background-position-x:200px,100%;}
40%,50%{background-position-x:100px,100%;}
60%,70%{background-position-x:250px,100%;}
80%,90%{background-position-x:150px,100%;}
}
で使ったような、透過とアニメーションによるトリックの応用です。
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
