怎么样使用css3动画实现鼠标跟随导航效果？

<div class="wrap">
      <ul>
        <li style="background-position:0px 0px; border-top:1px dotted #ccc;border-left:1px dotted #ccc;"></li>
        <li style="background-position:-230px 0px; border-top:1px dotted #ccc"></li>
        <li style="background-position:-460px 0px; border-top:1px dotted #ccc"></li>
        <li style="background-position:-690px 0px; border-top:1px dotted #ccc"></li>
        <li style="background-position:-920px 0px; border-top:1px dotted #ccc"></li>
        <li style="background-position:-1150px 0px;border-left:1px dotted #ccc;"></li>
        <li style="background-position:-1370px 0px"></li>
        <li style="background-position:-1600px 0px"></li>
        <li style="background-position:-1830px 0px"></li>
        <li style="background-position:-2060px 0px"></li>
        <li style="background-position:-2290px 0px;border-left:1px dotted #ccc;"></li>
        <li style="background-position:-2520px 0px"></li>
        <li style="background-position:-2750px 0px"></li>
        <li style="background-position:-2980px 0px"></li>
        <li style="background-position:-3210px 0px"></li>
      </ul>
      <div class="box"></div>

    <style>
      *{
        margin:0px;
        padding:0px;
      }
      html{
        height:100%;
      }
      body{
        width:100%;
        height:100%;
        background:url("images/wallpaper4.jpg");
        background-size:100% 100%;
        overflow: hidden;
      }
      .wrap{
        position:relative;
        width:1156px;
        height:450px;
        margin:50px auto;
      }
      .wrap ul li{
        position:relative;
        z-index:10;
        width:230px;
        height:150px;
        float:left;
        list-style:none;
        border-right:1px dotted #ccc;
        border-bottom:1px dotted #ccc;
        background:url("images/clients.png") no-repeat;
        -webkit-transition:1s;
        -moz-transition:1s;
        -ms-transition:1s;
        -o-transition:1s;
        transition:1s;
      }
      .box{
        position:absolute;
        left:0px;
        top:0px;
        z-index:2;
        width:230px;
        height:150px;
        background:rgba(0,0,0,.2);
        -webkit-transition:1s;
        -moz-transition:1s;
        -ms-transition:1s;
        -o-transition:1s;
        transition:1s;
      }
    </style>

  <script>
      var oLi = document.getElementsByTagName("li");
      var box = document.getElementsByClassName("box")[0];
      for (var i = 0;i<oLi.length ;i++ )
      {
        oLi[i].onmousemove = function(){
          var _left = this.offsetLeft;
          var _top = this.offsetTop;
          box.style.left = _left + "px";
          box.style.top = _top + "px";
          this.style.backgroundPositionY = "-150px";
        }
        oLi[i].onmouseout = function(){
          this.style.backgroundPositionY = "0px";
        }
      }
    </script>