Question

我试图制作一个简单的计时器幻灯片。基本上，图像仅在一定的秒数内可见（比方说5）并切换到另一个图像，然后重复。我已经搜索了它，但似乎无法让它为我工作。任何帮助都会很棒

这是我到目前为止所尝试的内容。我尝试了两个淡入的图像，但问题是它们没有重叠。一个在另一个之上，并且淡化动画有效，但它们都在同一时间淡出，而不是一个淡入另一个图像。

<style>
@keyframes cf3FadeInOut {
0%  {opacity:1;}
45% {opacity:1;}
55% {opacity:0;}
100% {opacity:0;}
}

#cf {
animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 10s;
animation-direction: alternate;
}
</style>

<div id="cf">
<img class="bottom" src="12289696_1526730367649084_3157113004361281453_n.jpg" />
<img class="top" src="11406788_1433347623654026_6824927253890240539_n.jpg" />
</div>

Answer 1

有2张图片，你可以用CSS动画以低成本做点什么：

@keyframes cf {
  50% {/* at 50%, it avoids alternate mode */
    opacity: 0;
  }
}

#cf {/* same size as image */
  height: 300px;
  width: 200px;
  margin:auto;
}

#cf img {
  position: absolute;/* lets stack them */
}

#cf .top {
  animation: cf 10s infinite; /* let it run for ever */
}

<div id="cf">
  <img class="bottom" src="http://lorempixel.com/200/300/people/3" />
  <img class="top" src="http://lorempixel.com/200/300/people/4" />
</div>

Answer 2

对于HTML和CSS（不带javascript）可能会使用动画css3属性。例如3张幻灯片：

HTML - 首先声明img用于加载（用于平滑动画）

<img class="for_load" src="http://lorempixel.com/400/200/">
<img class="for_load" src="http://lorempixel.com/400/201/">
<img class="for_load" src="http://lorempixel.com/400/202/">

CSS：

body{
  background:no-repeat;
  -webkit-animation:animation 10s infinite;
  -moz-animation:animation 10s infinite;
  animation:animation 10s infinite;   
  -webkit-animation-timing-function:linear;
  -moz-animation-timing-function:linear;
  animation-timing-function:linear;
}
.for_load{
  width:1px;
  height:1px;
  position:absolute;
  left:-1px;
  top:-1Px;
}
@-moz-keyframes animation{
  0%{
    background-image:url(http://lorempixel.com/400/200/);
  }
  30%{
    background-image:url(http://lorempixel.com/400/200/);
  }
  33%{
    background-image:url(http://lorempixel.com/400/201/);
  }
  63%{
    background-image:url(http://lorempixel.com/400/201/);
  }
  66%{
    background-image:url(http://lorempixel.com/400/202/);
  }
  97%{
    background-image:url(http://lorempixel.com/400/202/);
  }
  100%{
    background-image:url(http://lorempixel.com/400/200/);
  }
}
@-webkit-keyframes animation{
  0%{
    background-image:url(http://lorempixel.com/400/200/);
  }
  30%{
    background-image:url(http://lorempixel.com/400/200/);
  }
  33%{
    background-image:url(http://lorempixel.com/400/201/);
  }
  63%{
    background-image:url(http://lorempixel.com/400/201/);
  }
  66%{
    background-image:url(http://lorempixel.com/400/202/);
  }
  97%{
    background-image:url(http://lorempixel.com/400/202/);
  }
  100%{
    background-image:url(http://lorempixel.com/400/200/);
  }
}
@keyframes animation{
  0%{
    background-image:url(http://lorempixel.com/400/200/);
  }
  30%{
    background-image:url(http://lorempixel.com/400/200/);
  }
  33%{
    background-image:url(http://lorempixel.com/400/201/);
  }
  63%{
    background-image:url(http://lorempixel.com/400/201/);
  }
  66%{
    background-image:url(http://lorempixel.com/400/202/);
  }
  97%{
    background-image:url(http://lorempixel.com/400/202/);
  }
  100%{
    background-image:url(http://lorempixel.com/400/200/);
  }
}

https://jsfiddle.net/muLgodbf/

如何使用HTML和CSS制作简单的计时器图像幻灯片

2 个答案: