css 动画

目标：鼠标滑过砖块，砖块落下

image.png

html

<div class='main'>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>

css

.main {
  background：url(../image/bg.jpg);
  width:100%;
  height:100%;
 overflow:hidden;
}
.main span {
  display:inline-block;
  background:#fff;
 width:9.7%;
 height:100vh;
 box-sizing:border-box;
 border: 1px solid rgba(0,0,0,0.2);
 border-shadow = 0px 2px 5px rgba(0,0,0,0.5);
}
.main span.fall {
  z-index:1000;
 transition:0.2s;
backgroud-color:#f00;
 animation:fall 2s linear forward;
pointer-events:none;
}
@keyframes  fall {
   0%{
      transform:translateY(0) rotate(0deg)
   }
  100%{
     transform:translateY(1000px) rotate(20deg)
  }
}

   <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
   </script>

       $(document).ready(function(){
           $('span').mouseover(function(){
               var $span =  $(this);
               setTimeout(function(){
                   $span.addClass('fall');
               },100)
               
           })
       })