Question

好的，我有这4张图片

<ul>
    <li><img src="image1" /></li>
    <li><img src="image2" /></li>
    <li><img src="image3" /></li>
    <li><img src="image4" /></li>
</ul>

我已经学习了一些关于动画的知识并试图通过这个实现

 ul{
-webkit-animation-name: example; 
-webkit-animation-duration: 4s; 
animation-name: example;
animation-duration: 6s;
animation-iteration-count: infinite;
}
@-webkit-keyframes example {
0%   {background-image: 'image1';}
25%  {background-image: 'image2';}
50%  {background-image: 'image3';}
100% {background-image: 'image4';}
}


@keyframes example {
0%   {background-image: 'image1';}
25%  {background-image: 'image2';}
50%  {background-image: 'image3';}
100% {background-image: 'image4';}
}

我很困惑，如何使它们工作或图像？我尝试了一些我的工作，但它没有工作，没有显示图像。

Answer 1

我不确定你想要发生什么，但我确实知道在正确设置时动画背景图像。

请注意，元素（在这种情况下为div）必须具有高度，因为它不会将自身调整为背景图像的大小。

另外，需要使用正确的语法background-image: url(image-path-and-name)

请注意，这似乎仅适用于Chrome（不支持iOS / Safari）

div {
  height: 150px;
  width: 150px;
  -webkit-animation-name: example; 
  -webkit-animation-duration: 12s; 
  -webkit-animation-iteration-count: infinite;
  animation-name: example;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}
@-webkit-keyframes example {
  0% { background-image: url(http://placehold.it/150/f00); }
 25% { background-image: url(http://placehold.it/150/ff0); }
 50% { background-image: url(http://placehold.it/150/00f); }
100% { background-image: url(http://placehold.it/150/0f0); }
}
@keyframes example {
  0% { background-image: url(http://placehold.it/150/f00); }
 25% { background-image: url(http://placehold.it/150/ff0); }
 50% { background-image: url(http://placehold.it/150/00f); }
100% { background-image: url(http://placehold.it/150/0f0); }
}

<div></div>

如何在css3中对图像进行转换

1 个答案: