星空

3種類の大きさの星を、htmlのp要素で作成し、 フィールド内に10個配置しています。
スタイルシートで、色や形を整え、アニメーションを指定して、 下から上に移動させています。
大きいサイズの星には、時々、光るアニメーションも指定しています。
星の数が全部で500個になるまで、ジャバスクリプトで複製(クローン)を作成し、 画面下側のランダムな横位置に、ランダムな遅延を与えて配置しています。
遅延直にマイナスの値を与えることで、遅れて出てくるのでは無く、 下辺よりも上の方に配置することができるようです。

更新:2022.11.10