Question

我们可以通过使用css3动画来移动背景图像而不是移动div吗？

例如：

div{
width:800px;
position:relative;
background:url(image) no-repeat;
border:1px solid red;
-webkit-animation: mov 5s infinate;
}

@-webkit-keyframes mov{
from{ top:0px left: 500px;}
to{ top:500px; left:500px;}
}

在这种情况下，div将移至left:500px;我们是否只能移动背景图片？

感谢您的回答。

Answer 1

你当然可以，只需使用background-position属性：

@keyframes mov {
    0% { background-position: 0 0; }
    100% { background-position: 100% 100%; }
}

Answer 2

设置background-position-x和background-position-y属性，而不是设置top和left属性。这两个代表背景的“偏移”，因此设置它们似乎会移动背景。

我们可以在css3动画中移动背景图片吗？

2 个答案: