原生js和jquery动态创建

HTML

<div id="div01" class="divspan"></div>

CSS

body{
	margin: 0px;
	padding: 0px;
}
.divspan {
    width: 100%;
    height: 100vh;
    background-size: cover;
    background-image: url(imgs/ha.png);
    overflow: hidden;
}

.divspan span {
    width: 9.7%;
    height: 40px;
    display: inline-flex;
    background-color: rgb(255, 255, 255);
    box-sizing: border-box;
    box-shadow: 0.2px 5px rgba(0, 0, 0, 1);
    border: 1px solid rgba(0, 0, 0, 0.2);
}

.divspan span.fall {
    z-index: 1000;
    background: #f00;
    transition: 0.1s;
    /* animation: fall 2s linear forwards; */
}
@keyframes fall {
    0% {
    transform: translateY(0) rotate(0deg);
    }
    100% {
    transform: translateY(1000px) rotate(20deg);
    }
} 

JS

 <script>
window.onload=function(){
  //动态生成span
         var text1 =document.getElementById('div01');
                var txt2="<span></span>"; 
                    for(var i=0;i<26;i++){
                        for(var j=0;j<30;j++){
                            text1.innerHTML+=txt2;
                        }
                    } 
                //动画
                var div=document.getElementById('div01');
                var spans=div.getElementsByTagName('span');
                for(var i=0; i<spans.length; i++){
                    spans[i].onmousemove=function(){
                        for(var i=0; i<spans.length; i++){
                        this.style.animation=" "
                     }
                     this.style.animation="fall 2s linear forwards"
                    //  alert(this.value);
                     this.style.background='red';
                };
            }
        };
    //jquery写法
        // $(document).ready(function(){
        // var txt1="<span></span>"; 
        // for(var i=0;i<26;i++){
        //     for(var j=0;j<30;j++){
        //     $("#div01").append(txt1);
        //     }
        // }
        // });
    </script>