抖動效果

     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;} }