星を達成するためのHTML + JS + CSS

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 
< 頭> 
    < メタ文字コード= "UTF-8" > 
    < タイトル>满天星</ タイトル> 
    < スタイル> 
        * { 
            マージン：0 ; 
            パディング：0 ; 
        }

        HTML、本体{ 
            幅：100％ 。
            高さ：100％; 
            背景色：黒。
            位置：相対; 
        } 
        .starアニメーション{ 
            位置：相対。
            トップ：0 ; 
            左：0 ; 
            幅：100％; 
            高さ：100％; 
            オーバーフロー：隠されました; 
        }

        / * アニメーション* / 
        @ -webkit識別子キーフレーム{
            25％{
                変換：スケール（1.5）; 
            } 
            50％{ 
                変換：スケール（2） 。
            } 
            75％{ 
                変換：スケール（1.5） 。
            } 
            100％{ 
                変換：スケール（1） 。
            }

        }

        @ -O-キーフレーム識別子{
            25％{
                変換：スケール（1.5）; 
            } 
            50％{ 
                変換：スケール（2） 。
            } 
            75％{ 
                変換：スケール（1.5） 。
            } 
            100％{ 
                変換：スケール（1） 。
            }

        }

        @ -moz-キーフレーム識別子{
            25％{
                変換：スケール（1.5）; 
            } 
            50％{ 
                変換：スケール（2） 。
            } 
            75％{ 
                変換：スケール（1.5） 。
            } 
            100％{ 
                変換：スケール（1） 。
            }

        }

        @keyframes識別子{
            25％{
                変換：スケール（1.5）; 
            } 
            50％{ 
                変換：スケール（2） 。
            } 
            75％{ 
                変換：スケール（1.5） 。
            } 
            100％{ 
                変換：スケール（1） 。
            }

        }
    300 ; I ++







    
  ）{
            container.append（starFactory（））。
        }
    }）（document.getElementsByClassName（" スター・アニメーション" ）[ 0 ]）。

    // ファクトリ関数の星を作成する
    関数{）（starFactoryを
        聞かせてスター= のdocument.createElement（" DIV " ）;
        聞かせて幅= Math.ceil（Math.random（）* 5 ）。
        star.style.position =  「絶対」。
        star.style.width = 幅+  「ピクセル」。
        star.style.height = 幅+  「ピクセル」。
        star.style.backgroundColor =  ' ＃909090 ' ;
        star.style.top = Math.ceil（Math.random（）* window.innerHeight）+  ' PX ' 。
        star.style.left = Math.ceil（Math.random（）* window.innerWidth）+  ' PX ' 。
        star.style.boxShadow =  " ＃545454 0 " + Math.ceil（Math.random（）* 5 ）+ " PX " + Math.ceil（Math.random（）* 5 ）+ " 5pxの" 。
        star.style.borderRadius = 幅+  「ピクセル」。

        // 直径未満三つ星、ズームアニメーションである場合
        IF （幅<  3 ）{
            star.style.animation =  「識別子2000ミリ秒無限の500ミリ秒を」。
        }
        リターン・スター;
    }

</ スクリプト> 
</ HTML >

コードの表示

効果：