这是我的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度的背景图像旋转动画,用于鼠标悬停事件。有谁能够帮我?谢谢。
答案 0 :(得分:3)
这是您的要求:
<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);}
}
答案 1 :(得分:1)
您无法通过CSS(级别2,3)旋转背景图像。 因此,唯一的选择是对该图像使用单独的元素,并将该元素作为一个整体旋转/动画。
但您可以在CSS level 4中执行此操作。
答案 2 :(得分:0)
您可以使用伪元素来实现此目的
#div1{
position: absolute;
top: 50%;
left: 50%;
margin-left:-100px;
margin-top: 420px;
}
#div:before {
content: "";
position: absolute;
width: 158px;
height: 158px;
background-image:url(images/background.png);
transition: all 1s linear;
}
#div:hover:before {
transform:rotate(360deg);
}
答案 3 :(得分:0)
打开背景图片:悬停仅使用CSS代码。
http://designshack.net/tutorialexamples/multiplebackgrounds/index.html