这是我的 div。
#div1{
position: absolute;
top: 50%;
left: 50%;
margin-left:-100px;
margin-top: 420px;
width: 158px;
height: 158px;
background-image:url(images/background.png);
}
对于鼠标悬停事件,我需要 360 度的背景图像旋转动画。有谁能够帮助我?谢谢。
最佳答案
这是您的要求:
<div id="div1">rterterrt
teteterrtetre<div id="div2">
</div></div>
.
#div1{
position: absolute;
top: 50%;
left: 50%;
margin-left:-100px;
/*margin-top: 420px;*/
width: 158px;
height: 158px;
}
#div2{
/*margin-top: 420px;*/
width: 158px;
height: 158px;
background-image:url(http://www.commentsyard.com/cy/01/6474/Mixed%20Flowers%20and%20a%20Bear.jpg);
}
#div2:hover {
-webkit-animation-name: rotate;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-moz-animation-name: rotate;
-moz-animation-duration: 2s;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
}
@-webkit-keyframes rotate {
from {-webkit-transform: rotate(0deg);}
to {-webkit-transform: rotate(360deg);}
}
关于animation - 鼠标悬停时CSS3背景旋转动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12506305/