css - 我们可以在 css3 动画中移动背景图像吗？

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 移动 {
    0% { 背景位置：0 0; }
    100% { 背景位置：100% 100%; }
}

Answer 2

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