1

キーフレームを使用してスライドショーを作成していますが、問題があります。

キーフレームは、ここで最初の画像の位置を変更します。

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}
}

しかし、スライドさせたい画像は最後です。キーフレームの優先度を変更する方法についてのアイデアはありますか？最初の画像には不透明度があり、2番目の画像を見ることができます。私がそれらの場所を交換すると、最後のものが後ろになってしまい、蜂が見えなくなります...

ありがとう

4

1 に答える 1

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}  
}
于 2012-05-15T06:25:26.750 に答える