鼠标悬浮在图片上面时图片旋转360度代码

此代码仅供参考

---

代码说明

移动鼠标或用拇指触到图片时，图片会旋转起来，转够360度后停下，即和开始时一样，移开或点下外面图片又将会旋转一次。

---

html代码(圆图旋转)

<style> .picture_xzy img{ width:60px;height:60px; /*设置图像的长和宽，这里要根据自己的评论框情况更改*/ border-radius: 30px;/*设置图像圆角效果,在这里我直接设置了超过width/2的像素，即为圆形了*/ -webkit-border-radius: 30px;/*圆角效果：兼容webkit浏览器*/ -moz-border-radius:30px; box-shadow: inset 0 -1px 0 #3333sf;/*设置图像阴影效果*/ -webkit-box-shadow: inset 0 -1px 0 #3333sf; -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360度）*/ -moz-transition: -moz-transform 0.4s ease-out; } .picture_xzy img:hover{/*设置鼠标悬浮在头像时的CSS样式*/ box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); transform: rotateZ(360deg);/*图像旋转360度*/ -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); } </style> <div class="picture_xzy"> <img src="图片网址.jpg"/> </div>

---

代码演示

---

html代码一(图片旋转)

<style> .picture_xz img{ -webkit-transition: 0.4s; -webkit-transition: -webkit-transform 0.4s ease-out; transition: transform 0.4s ease-out;/*变化时间设置为0.4秒(变化动作即为下面的图像旋转360度）*/ -moz-transition: -moz-transform 0.4s ease-out; } .picture_xz img:hover{ /*设置鼠标悬浮在图片时的CSS样式*/ box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); -webkit-box-shadow: 0 0 10px #fff; rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); transform: rotateZ(360deg);/*图像旋转360度*/ -webkit-transform: rotateZ(360deg); -moz-transform: rotateZ(360deg); } </style> <div class="picture_xz"> <img src="图片网址.jpg"/> </div>

---

html二代码(旋转图片)

<style> .xz-picture img{ -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; transition: transform 0.4s ease-out; } .xz-picture img:hover{ -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); transform: rotate(360deg); } </style> <div class="picture_xzy"> <img src="图片网址.jpg"/> </div>

---

代码演示

---

html代码(图片翻转)

<style type="text/css"> #p1{height:90px;} </style> <script type="text/javascript"> var left=200; var img=document.getElementById('p1'); var imgWidth=286; var pi=Math.PI; var x=0,temp=0; function init(){ document.getElementById('p1').style.left=left+'px'; var set=setInterval('goOn()',40); } function goOn(){ temp=Math.cos(x); document.getElementById('p1').style.width=Math.abs(imgWidth*temp)+'px'; document.getElementById('p1').style.left=(left+(imgWidth-Math.abs(imgWidth*temp/2)))+'px'; if(temp<0){ document.getElementById('p1').style.filter='FlipH(enabled:true)'; }else{ document.getElementById('p1').style.filter='FlipH(enabled:false)'; } x+=pi/90; } </script> <div id="imground"> <img id="p1" src="http://图片网址.jpg" alt="旋转图片"/> <!--图片地址--> </div> <script type="text/javascript">init();</script>

---

代码演示

---

html代码(图片抖动放大)

<style> .picture_pulse img,.picture_pulse img:hover{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:0s;-moz-animation-duration:0s;-ms-animation-duration:0s;-o-animation-duration:0s;animation-duration:0s;-webkit-animation-duration:.7s;-moz-animation-duration:.7s;-ms-animation-duration:.7s;-o-animation-duration:.7s;animation-duration:.7s} @-webkit-keyframes pulse{0%{-webkit-transform:scale(1)}50%{-webkit-transform:scale(1.1)}100%{-webkit-transform:scale(1)}} @-moz-keyframes pulse{0%{-moz-transform:scale(1)}50%{-moz-transform:scale(1.1)}100%{-moz-transform:scale(1)}} @-o-keyframes pulse{0%{-o-transform:scale(1)}50%{-o-transform:scale(1.1)}100%{-o-transform:scale(1)}} @keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}} .picture_pulse img:hover{-webkit-animation-name:pulse;-moz-animation-name:pulse;-o-animation-name:pulse;animation-name:pulse} </style> <div class="picture_pulse"> <img src="图片网址.jpg"/> </div>

---

代码演示

---

html代码(图片抖动放大、圆角边框效果)

<style> .picture_pulse img {border:1px solid #888;display:block;margin-bottom:6px;width:103px;height:75px; *padding:3px; *border:1px solid #eee; -webkit-border-radius:6px;/* Webkit browsers */border-radius:6px;box-shadow: inset 0 -1px 0 #3333sf;-webkit-box-shadow: inset 0 -1px 0 #3333sf;-webkit-transition: 0.4s;-webkit-transition: -webkit-transform 0.4s ease-out;transition: transform 0.4s ease-out;-moz-transition: -moz-transform 0.4s ease-out;} .picture_pulse img,.picture_pulse img:hover{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:0s;-moz-animation-duration:0s;-ms-animation-duration:0s;-o-animation-duration:0s;animation-duration:0s;-webkit-animation-duration:.7s;-moz-animation-duration:.7s;-ms-animation-duration:.7s;-o-animation-duration:.7s;animation-duration:.7s} @-webkit-keyframes pulse{0%{-webkit-transform:scale(1)}50%{-webkit-transform:scale(1.1)}100%{-webkit-transform:scale(1)}} @-moz-keyframes pulse{0%{-moz-transform:scale(1)}50%{-moz-transform:scale(1.1)}100%{-moz-transform:scale(1)}} @-o-keyframes pulse{0%{-o-transform:scale(1)}50%{-o-transform:scale(1.1)}100%{-o-transform:scale(1)}} @keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}100%{transform:scale(1)}} .picture_pulse img:hover{-webkit-animation-name:pulse;-moz-animation-name:pulse;-o-animation-name:pulse;animation-name:pulse} </style> <div class="picture_pulse"> <img src="图片网址.jpg"/> </div>

---

代码演示

---

html代码(图片悬挂摆动)

<style> .picture_swing img,.picture_swing:hover{-webkit-animation-fill-mode: both;-moz-animation-fill-mode: both;-ms-animation-fill-mode: both;-o-animation-fill-mode: both;animation-fill-mode: both;-webkit-animation-duration: 0s;-moz-animation-duration: 0s;-ms-animation-duration: 0s;-o-animation-duration: 0s;animation-duration: 0s;-webkit-animation-duration: 0.7s;-moz-animation-duration: 0.7s;-ms-animation-duration: 0.7s;-o-animation-duration: 0.7s;animation-duration: 0.7s;} @-webkit-keyframes swing {20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }20% { -webkit-transform: rotate(15deg);}40%{-webkit-transform: rotate(-10deg);}60%{-webkit-transform: rotate(5deg);}80%{-webkit-transform: rotate(-5deg);}100%{-webkit-transform: rotate(0deg);}} @-moz-keyframes swing {20% { -moz-transform: rotate(15deg); }40% { -moz-transform: rotate(-10deg); }60% { -moz-transform: rotate(5deg); }80% { -moz-transform: rotate(-5deg); }100% { -moz-transform: rotate(0deg);}} @-o-keyframes swing {20% { -o-transform: rotate(15deg);}40%{-o-transform: rotate(-10deg);}60%{-o-transform: rotate(5deg);}80%{-o-transform: rotate(-5deg);}100%{-o-transform: rotate(0deg);}} @keyframes swing {20%{ transform: rotate(15deg);}40% { transform: rotate(-10deg);}60%{transform: rotate(5deg);}80%{transform: rotate(-5deg);}100%{transform: rotate(0deg);}} .picture_swing img:hover{-webkit-transform-origin: top center;-moz-transform-origin: top center;-o-transform-origin: top center;transform-origin: top center; -webkit-animation-name: swing;-moz-animation-name: swing;-o-animation-name: swing;animation-name: swing;} </style> <div class="picture_swing"> <img src="图片网址.jpg"/> </div>

---

代码演示

---

图片调用

---

---