使用CSS3自动更改背景图片

Question

使用CSS3自动更改背景图片

4

我正在尝试使用CSS3自动更改背景图片。我有9个图像需要在背景中更改。我面临的问题是，它只显示幻灯片中的第一个和最后一个图像，而不是第2、3、4、5、6、7、8个。我有以下代码：

<img id="img1" src="images/1.gif">
<img id="img2" src="images/2.gif">
<img id="img3" src="images/3.gif">
<img id="img4" src="images/4.gif">

<img id="img5" src="images/5.gif">
<img id="img6" src="images/6.gif">
<img id="img7" src="images/7.gif">
<img id="img8" src="images/8.gif">

<img id="img9" src="images/9.gif">

以下是 CSS 代码：

#img1, #img2, #img3, #img4, #img5, #img6, #img7, #img8, #img9 {
    width:610px;
    height:610px;
    position:scroll;
    z-index:-1;
    animation-name: test;
    animation-duration: 90s;
    opacity:0;
}
#img2 {
animation-delay:10s;
-webkit-animation-delay:10s
}
#img3 {
    animation-delay:20s;
    -webkit-animation-delay:20s
}
#img4 {
    animation-delay:30s;
    -webkit-animation-delay:30s
}

#img5 {
    animation-delay:40s;
    -webkit-animation-delay:40s
}
#img6 {
    animation-delay:50s;
    -webkit-animation-delay:50s
}
#img7 {
    animation-delay:60s;
    -webkit-animation-delay:60s
}

#img8 {
    animation-delay:70s;
    -webkit-animation-delay:70s
}
#img9 {
    animation-delay:80s;
    -webkit-animation-delay:80s
}

@-webkit-keyframes test {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}
@keyframes test {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
    }
}

每个幻灯片的延迟时间从1到8都是10秒，除了图像9，它的延迟时间为8.60秒。

请帮我找出我的错误。:(

- sana

1

你需要将2-9的延迟更改为(n-1)*10，意思是2=10，3=20等等。如果它们都有相同的延迟，它们将同时显示（延迟不会相加）。 - Zach Saucier

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lee · Accepted Answer

好的，我已经制作了一个JS Fiddle，并且我认为我已经得到了你想要的结果。

http://jsfiddle.net/d48vdxmv/2/

基本上，你需要先将你的图片放在一个容器中：

<div id="container">
    <img src="http://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg">
    <img src="http://imaging.nikon.com/lineup/dslr/df/img/sample/img_02.jpg">
    <img src="http://imaging.nikon.com/lineup/dslr/df/img/sample/img_03.jpg">
    <img src="http://imaging.nikon.com/lineup/dslr/df/img/sample/img_04.jpg">
</div>

然后在CSS中，将容器设置为相对定位，将图像设置为绝对定位，这样它们就会堆叠在彼此的上方。

#container {
  position:relative;
  height:610px;
  width:610px;
}
#container img {
  position:absolute;
  left:0;
}

接着添加你的关键帧，包括不同浏览器的变化

@-webkit-keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-o-keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

然后你的动画细节适用于所有浏览器

#container img {
  -webkit-animation-name: imgFade;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 8s;

  -moz-animation-name: imgFade;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 8s;

  -o-animation-name: imgFade;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 8s;

  animation-name: imgFade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 8s;
}

最后，请为每个图像设置持续时间

#container img:nth-of-type(1) {
  -webkit-animation-delay: 6s;
  -moz-animation-delay: 6s;
  -o-animation-delay: 6s;
  animation-delay: 6s;
}
#container img:nth-of-type(2) {
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
#container img:nth-of-type(3) {
  -webkit-animation-delay: 2s;
  -moz-animation-delay: 2s;
  -o-animation-delay: 2s;
  animation-delay: 2s;
}
#container img:nth-of-type(4) {
  -webkit-animation-delay: 0;
  -moz-animation-delay: 0;
  -o-animation-delay: 0;
  animation-delay: 0;
}