Question

我正在尝试使用CSS3创建一个图像库而不需要javascript。这是我目前的解决方案：

.slide {
  position: absolute;
}
.slide:nth-child(1) {
  -webkit-animation: fade 24s 18s infinite;
  z-index: 10;
}
.slide:nth-child(2) {
  -webkit-animation: fade 24s 12s infinite;
  z-index: 10;
}
.slide:nth-child(3) {
  -webkit-animation: fade 24s 6s infinite;
  z-index: 10;
}
.slide:nth-child(4) {
  -webkit-animation: fade 24s 0s infinite;
  z-index: 10;
}
@-webkit-keyframes fade {
  0% {
    opacity: 1;
  }
  23% {
    opacity: 1;
  }
  25% {
    opacity: 0;
  }
  98% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<img src="http://simplewishphotography.com/wp-content/uploads/2013/11/Nature-Photography-Healing-Your-Body.jpg" class="slide" alt="" />
<img src="http://f9vision.com/wp-content/uploads/2014/02/Beautiful-Images-of-Nature-Facebook1-300x300.jpg" class="slide" alt="" />
<img src="https://lh3.ggpht.com/jxaV3lR5hbep2BzH6YIRkhQC7872M4kRNfXd24csoO1CrWG7FtHaLjOOrfWpQWJb=w300" class="slide" alt="" />
<img src="http://www.yondaphotography.com/wp-content/uploads/2014/01/Nature-Photography-Techniques-For-Beginners.jpg" class="slide" alt="" />

我的问题是当CSS渲染第四个图像时，它在渲染下一个图像之前显示一个空白区域，当它循环返回以再次渲染图像时，它总是显示每个图像之间的空白区域。

如何解决此问题？有人可以建议一个解决方案。

感谢。

Answer 1

实际上在稍微摆弄代码之后我设法重现了Chrome中的OP问题。

问题是由动画时间内img不透明度的错误同步引起的。当不透明度变为0并且下方没有可见图像时，图像闪烁。

用于保持迭代同步的直观且易于理解的分辨率定义了一系列动画，每个图像一个动画，以便我们可以单独改进每个图像的过渡，如下所示：

    .slide {
    position:absolute;
}

.slide:nth-child(1) {
    -webkit-animation: fade0 24s infinite;
    z-index:10;
}

.slide:nth-child(2) {
    -webkit-animation: fade25 24s infinite;
    z-index:10;
}

.slide:nth-child(3) {
    -webkit-animation: fade50 24s infinite;
    z-index:10;
}

.slide:nth-child(4) {
    -webkit-animation: fade75 24s infinite; 
    z-index:10;
}

@-webkit-keyframes fade0 {
   0% {opacity:0.95;}
   2% {opacity:1;}
   100% {opacity:1;} 
   }
@-webkit-keyframes fade25 {
   0% {opacity:0;}
   25% {opacity:0;}
   27% {opacity:1;}
   100% {opacity:1;} 
   }
@-webkit-keyframes fade50 {
   0% {opacity:0;}
   50% {opacity:0;}
   52% {opacity:1;}
   100% {opacity:1;} 
   }
@-webkit-keyframes fade75 {
   0% {opacity:0;}
   75% {opacity:0;}
   77% {opacity:1;}
   100% {opacity:1;} 
   }

<img src="http://simplewishphotography.com/wp-content/uploads/2013/11/Nature-Photography-Healing-Your-Body.jpg" class="slide" alt="" />
<img src="http://f9vision.com/wp-content/uploads/2014/02/Beautiful-Images-of-Nature-Facebook1-300x300.jpg" class="slide" alt="" />
<img src="https://lh3.ggpht.com/jxaV3lR5hbep2BzH6YIRkhQC7872M4kRNfXd24csoO1CrWG7FtHaLjOOrfWpQWJb=w300" class="slide" alt="" />
<img src="http://www.yondaphotography.com/wp-content/uploads/2014/01/Nature-Photography-Techniques-For-Beginners.jpg" class="slide" alt="" />

Answer 2

技术解决方案是：

总是显示不透明度的第一张图片：1;
第二张图片显示30-66％，如果不在此范围内，则一直隐藏。
第三张图片将显示64-96％，如果不在此范围内，则始终隐藏。
**我想在将第三张图像交换到第一张图像时有淡化效果，解决方案是隐藏第三张图像从96-100％。请参阅下面的编码。

＆＃13;

    /*.item:nth-child(1){
        -webkit-animation: fade1 50s infinite;
    }*/
    .item:nth-child(2){
        -webkit-animation: fade2 50s infinite;
    }
    .item:nth-child(3){
        -webkit-animation: fade3 50s infinite;
    }
    /*@-webkit-keyframes fade1 {
        0% {opacity:0;}
        2% {opacity:1;}
        100% {opacity:1;}
    }*/
    @-webkit-keyframes fade2 {
        0% {opacity:0;}
        30% {opacity:0;}
        34% {opacity:1;}
        65% {opacity:1;}
        66% {opacity:0;}
        100% {opacity:0;}
    }
    @-webkit-keyframes fade3 {
        0% {opacity:0;}
        60% {opacity:0;}
        64% {opacity:1;}
        96% {opacity:1;}
        100% {opacity:0;}
    }

＆＃13;

<img src="http://simplewishphotography.com/wp-content/uploads/2013/11/Nature-Photography-Healing-Your-Body.jpg" class="slide" alt="" />

<img src="http://f9vision.com/wp-content/uploads/2014/02/Beautiful-Images-of-Nature-Facebook1-300x300.jpg" class="slide" alt="" />

<img src="https://lh3.ggpht.com/jxaV3lR5hbep2BzH6YIRkhQC7872M4kRNfXd24csoO1CrWG7FtHaLjOOrfWpQWJb=w300" class="slide" alt="" />

＆＃13;

CSS3淡出有错误的操作

2 个答案: