淡化CSS幻灯片,没有循环的js

Question

我是一名"新"网页设计师,我还在学习!CSS对我来说有点难......请有人帮助我!:)

我需要在循环中以1到2,而不是3和4的顺序进行淡入淡出4图像转换,返回1.

我已经从这里尝试了2个教程.但是,当我更改设置以适应我的,不起作用.我的结果如下:http: //www.mafeluvizotto.com.br/crossfading/

在第一个序列之后,动画变得枯萎......

图像在这里:... crossfading/1.jpg(2.jpg,3.jpg和4.jpg)

请有人帮我解决这个问题吗？

非常感谢 !!

Answer 1

这背后的想法是你需要知道所涉及的金额.您必须计算动画的时间与"幻灯片"的数量与您希望它们显示的时间长度.

在我的例子中,它是4张幻灯片,每张6秒.这有助于我计算动画的时间和延迟动画的时间.

动画时间由100%的关键帧确定,这些关键帧由幻灯片的总数来划分,在这种情况下为4.这确定25%(100/4)是何时淡出 -

 @-webkit-keyframes fade {
  0%{
     opacity: 1;
  }
  15% {
     opacity:1;
  }
  25%{
    opacity: 0;
  }
  90% {
     opacity:0;
  }
  100% {
     opacity:1;
  }
}

在这种情况下,淡出和淡入之前的百分比是10%.25-10 = 15,而100-10 = 90.这决定了每张幻灯片的淡入时间.

然后,动画的持续时间由幻灯片x显示时间确定.4张幻灯片乘以6秒各给我们24秒的持续时间.

每个之间的延迟是该时间减去每张幻灯片,或6秒,这导致:

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

这是一个演示 - http://jsfiddle.net/5zx43/1/

为了保持HTML的顺序与幻灯片放映的顺序相同z-index,必须使用,并且:nth-child()需要颠倒与动画相关的延迟顺序.

这是"正确"订单的演示 - http://jsfiddle.net/5zx43/2/

这有一个很棒的教程 - http://themarklee.com/2013/10/16/simple-crossfading-slideshow-css/

当然,请记住,对于其他浏览器keyframe,animation前缀可能需要不同.