Question

我正在制作带关键帧的幻灯片，但存在问题..

关键帧在此更改第一张图像的位置：

background-image:url('images/cover.png'), url('images/slideshow.jpg');
-webkit-animation:slider 20s infinite alternate ease-in-out;

@-webkit-keyframes slider {
0% {background-position: 0px 0px}
14% {background-position: 0px 0px}
28% {background-position: -1280px 0px}
42% {background-position: -1280px 0px}
56% {background-position: -2560px 0px}
70% {background-position: -2560px 0px}
84% {background-position: -3840px 0px}
100% {background-position: -3840px 0px}
}

但我想要滑动的图像是最后一个，关于如何改变关键帧优先级的任何想法？第一张图片有一些不透明度，这使我能够看到第二张图像。如果我在他们上面交换位置，最后一个就会落后，无法看到......

感谢

Answer 1

background-position属性可以有多个值，目前动画正在影响两个图像。这样的事情应该有效：

@-webkit-keyframes slider {  
    0% {background-position: 0 0, 0px 0px}  
    14% {background-position: 0 0, 0px 0px}  
    28% {background-position: 0 0, -1280px 0px}  
    42% {background-position: 0 0, -1280px 0px}  
    56% {background-position: 0 0, -2560px 0px}  
    70% {background-position: 0 0, -2560px 0px}  
    84% {background-position: 0 0, -3840px 0px}  
    100% {background-position: 0 0, -3840px 0px}  
}

将关键帧更改为2'图像

1 个答案: