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>