Question

以下CSS控制我的3张图片幻灯片显示的时间：

.slideshow li:child(1) span { 
    background-image: url(../../pic/bg1.jpg); 
}
.slideshow li:child(2) span { 
    background-image: url(../../pic/bg2.jpg);
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -o-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s; 
}
.slideshow li:child(3) span { 
    background-image: url(../../pic/bg3.jpg);
    -webkit-animation-delay: 16s;
    -moz-animation-delay: 16s;
    -o-animation-delay: 16s;
    -ms-animation-delay: 16s;
    animation-delay: 16s; 
}

我正面临的问题是，当图像从一个图像转换到另一个图像时，图像彼此重叠，这导致质量不佳的幻灯片显示，有时会卡住并停止滑动。我应该在我的代码中添加其他内容吗？

Answer 1

我想在遇到类似案件之前我遇到过。这里重叠图像的问题可能是由于未定义“不透明度”参数。而“不透明度”我的意思是即使你当前的CSS控制动画延迟，它也应该控制每个图像“不透明度”的时间，这样它就会给出淡入和淡出的感觉，然后再次正确地重新启动。所以，从你上面的CSS来看，整个幻灯片周期是16秒;现在，我们知道第二张图像将在第8秒开始动画，我们必须知道动画的百分位数将使第一张图像淡出。将8乘以16得到0.5或50％。现在，花费所有时间来淡入是不可取的，所以我们采取25％的半值。然后，我们开始从50％逐渐消失，完全消失在75％。以上可以使用CSS“@keyframes”属性完成，类似：

{
@keyframes imageAnimation {
0% { opacity: 0; animation-timing-      function: ease-in;}
25% { opacity: 1; animation-timing-function: ease-out;}
50% { opacity: 1 }
75% { opacity: 0 }
100% { opacity: 0 }
}

告诉我们是否有效。

CSS3幻灯片已损坏且模糊输出

1 个答案: