Question

我是一名“新”网页设计师，我正在学习！ CSS对我来说有点难......请有人帮助我！：）

我需要使用淡入淡出循环进行4图像过渡，顺序为1到2，而不是3和4，返回1。

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

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

图片在这里： ...交叉淡入淡出/ 1.JPG （2.jpg，3.jpg和4.jpg）

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

非常感谢!!

Answer 1

这背后的想法是你需要知道所涉及的金额。你必须计算动画的时间与多少＆＃34;幻灯片＆＃34;与您希望它们显示的时间长短。

在我的例子中，它是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()相关的动画的延迟顺序。

这是＆＃34;正确＆＃34;的演示订单 - http://jsfiddle.net/5zx43/2/

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

当然，请注意，keyframe和animation前缀可能需要与其他浏览器不同。

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

1 个答案: