Question

我试图创建一个多图像库，自动切换和淡入图片。我只尝试使用CSS，但它不起作用。

这是HTML

<div id="cf4a">
  <img src="img/1a.jpg"/>   
  <img src="img/2a.jpg"/>
  <img src="img/3a.jpg" />
  <img src="img/4a.jpg"/>
</div>

这是CSS

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

#cf4a {
  position:relative;
  top:200px;
  right:0;
  left:0;
  bottom:0;
  background:red;
  height:280px;
  width:100%;
  margin:auto;
}

#cf4a img {
  position:absolute;
  width:100%;
  height:280px;
  left:0;
  animation-name: cf4aFadeInOut;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 2s;
  animation-direction: alternate;
}

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

它不会切换！我对HTML＆amp; CSS，所以我使用了这个指南：http://css3.bradshawenterprises.com/cfimg/

提前致谢：）

P.S我知道你可以用jQuery做到这一点，但我宁愿使用CSS。

Answer 1

@keyframes cf4FadeInOut类名根据您的代码而有误。

应该是“@keyframes cf4aFadeInOut”而不是??

CSS褪色图片库

1 个答案: