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); 
            } 

        } 
    </ 스타일 > 
</ 머리 > 
< 몸 > 
< DIV > </ DIV > 
< DIV 클래스 = "별 애니메이션" > </ DIV > 
</ 몸 > 
< 스크립트 SRC = "JS / 스타 animation.js " > </ 스크립트 > 
< 스크립트 >
    
 <  300 ; I ++ ) { 
            container.append이 (starFactory ()); 
        } 
    }) (document.getElementsByClassName ( " 별 애니메이션 " ) [ 0 ]); 

    // 공장을 만들기 함수 별 
    기능 starFactory () { 
        송출을 스타 = document.createElement ( " DIV " ); 
        송출 폭 = Math.ceil (인 Math.random () * 5. ) 
        star.style.position =  " 절대 " ; 
        star.style.width = 폭+  ' PX를 ' ; 
        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 0" + Math.ceil (인 Math.random () * 5. ) + " PX " + Math.ceil (인 Math.random () * 5. ) + " 5px " ; 
        star.style.borderRadius = 폭 +  ' PX ' ; 

        // 직경 미만 세 개, 줌 애니메이션이 때 
        만약에 (폭 <  3 ) { 
            star.style.animation =  " 식별자가 500ms의 무한 2000ms " ; 
        } 
        리턴 ; 스타 
    } 

</를스크립트 > 
</ HTML >

코드보기

효과 :