当鼠标在图片上使图片向左旋转45度 然后再向右旋转45度

当鼠标移到图片上使图片  以图片顶部中心位置为中心
向左旋转45度 然后再向右旋转45度  实现摇晃效果？如何实现

解决方案 »

  1.   

    作一个符合要求的gif图片(A)不得了。
    当鼠标移到图片上切换到A图片不可以吗
      

  2.   


    不会做gif图片  也希望用JS实现
      

  3.   

    用css来实现，ie9以上支持<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head></head>
    <body>
     <style>
    .r{ 
     margin:150px;
         height:100px;
         width:100px;
      }@-webkit-keyframes t-r { 
    25% { -webkit-transform: rotate(-10deg); }
    75% { -webkit-transform: rotate(10deg); } 
    100% { -webkit-transform: rotate(0deg); } 
    }@-moz-keyframes t-r  { 
    25% { -moz-transform: rotate(-10deg); }
    75% { -moz-transform: rotate(10deg); } 
    100% { -moz-transform: rotate(0deg); } 
    }
    @-ms-keyframes t-r { 
    25% { transform: rotate(-10deg); }
    75% { transform: rotate(10deg); } 
    100% { transform: rotate(0deg); } 
    }
      .r img:hover{
         border:1px solid #ccc;
      -webkit-animation-name: t-r ;  
    -webkit-animation-duration: 0.3s;
     -webkit-animation-iteration-count: 1; 
    -webkit-transition-timing-function: ease-in-out;   -moz-animation-name:t-r ;  
    -moz-animation-duration: 0.3s;
    -moz-animation-iteration-count: 1; 
    -moz-transition-timing-function: ease-in-out;
      animation-name:t-r;  
    animation-duration: 0.3s;
    animation-iteration-count: 1; 
    transition-timing-function: ease-in-out;
      }
      .r img{
    border:1px solid #ccc;
         height:100px;
         width:100px;
      }
      </style> 
     <div class="r" >
      <img  src="http://www.google.com.hk/images/srpr/logo4w.png"> 
     </div>
    </body> 
    </html>
      

  4.   

        恩 就是这个效果 谢谢啊  就是
    @-webkit-keyframes t-r { 
        25% { -webkit-transform: rotate(-10deg); }
        75% { -webkit-transform: rotate(10deg); } 
        100% { -webkit-transform: rotate(0deg); } 
    }
     
    @-moz-keyframes t-r  { 
        25% { -moz-transform: rotate(-10deg); }
        75% { -moz-transform: rotate(10deg); } 
        100% { -moz-transform: rotate(0deg); } 
    }
    @-ms-keyframes t-r { 
        25% { transform: rotate(-10deg); }
        75% { transform: rotate(10deg); } 
        100% { transform: rotate(0deg); } 
    }这个不太懂
      

  5.   

    keyframes 关键帧 ，可以理解成路径轨迹
    25% { -webkit-transform: rotate(-10deg); } 
    路径 25% 到 rotate(-10deg) 点
    @-ms-keyframes t-r  定义一个成路径轨迹名 t-r前缀 moz，ms,webkit，兼容浏览器