抖动效果

     js实现     

<div id="btn"></div>
<div id="win"></div>
<script>
var a=['top','left'];
var b=0;
var u;
function dong(){
  win.style[a[b%2]]=(b++)%4<2?'0':'4px';
  if(b>15){
    clearInterval(u);
    b=0;
  }
}
function dz(){
  clearInterval(u);
  u=setInterval(dong,32);
}
window.onload=function(){
  var btn=document.getElementById("btn");
  var win=document.getElementById("win");
  btn.onclick=dz;
}
</script>

      css实现     

 

  #win{
      position:absolute;
      top:0;
      left: 0;
      width:100px;
      height:100px;
      background-color:#666;
      animation:dong 0.15s infinite;
      -webkit-animation:dong 0.15s infinite; /*Safari and Chrome*/
  }
  @-webkit-keyframes dong {
      from{top:0;left:0;}
      to{top:4px;left:4px;}
  }
  @keyframes dong {
      from{top:0;left:0;}
      to{top:4px;left:4px;}
  }

 

转载于:https://www.cnblogs.com/mudeng-007/p/7993622.html