计算CSS3幻灯片中10个或更多图像的百分比 [英] Calculating percentages for 10 or more images in a CSS3 slideshow

问题描述

我正在尝试在定时循环幻灯片放映中设置一系列10个图像的动画。幻灯片已经开始播放了.说大也大吧。作为CSS3的新手，即使在谷歌上搜索了一整天，我也没有找到这个问题的答案。

我的第一个问题在于每个图像的时间安排。我已经为10个图像中的每一个都创建了div，并在我的css中为每个图像编写了单独的规则(如‘ETC...’所示)。以下)。

我不确定我应该如何根据您使用的图像数量计算@KeyFrame动画的百分比。下面我提供了一个例子：

@-webkit-keyframes anim_slides {
0% { opacity:0; }
6% { opacity:1; }
24% { opacity:1; }
30% { opacity:0; }
100% { opacity:0;}
}

.slides ul  li:nth-child(2), .slides ul  li:nth-child(2) div {
-webkit-animation-delay: 8.0s;
-moz-animation-delay: 8.0s;}

.slides ul  li:nth-child(3), .slides ul  li:nth-child(3) div {
-webkit-animation-delay: 16.0s;
-moz-animation-delay: 16.0s;}

.slides ul  li:nth-child(4), .slides ul  li:nth-child(4) div {
-webkit-animation-delay: 24.0s;
-moz-animation-delay: 24.0s;}

.slides ul  li:nth-child(5), .slides ul  li:nth-child(5) div {
-webkit-animation-delay: 32.0s;
-moz-animation-delay: 32.0s;}

etc....

我包含的.lides信息实际上只是作为参考，因为我最关心的是百分比。

我找到的大多数CSS3动画教程只使用3-6个图像，百分比是专门为这个数字设置的。由于我使用的是10张图片，百分比似乎不再相关。

第二，我不确定当您有超过(显然)标准的3-6个图像时，动画的持续时间会受到什么影响。

.slides ul li {
opacity:0;
position:absolute;
top:0;

/* css3 animation */
-webkit-animation-name: anim_slides;
-webkit-animation-duration: 80.0s;
-webkit-animation-timing-function: linear;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-delay: 0;
-webkit-animation-play-state: running;
-webkit-animation-fill-mode: forwards;

-moz-animation-name: anim_slides;
-moz-animation-duration: 80.0s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
-moz-animation-direction: normal;
-moz-animation-delay: 0;
-moz-animation-play-state: running;
-moz-animation-fill-mode: forwards;}

如您所见，动画持续时间设置为80.0s。老实说，我甚至不确定这是否正确。

有谁能帮帮我吗？我真正需要的只是一个解释。

谢谢！

推荐答案

计算百分比的方式取决于您希望转换如何工作。

当您设置

@-webkit-keyframes anim_slides {
    0% { opacity:0; }
    6% { opacity:1; }
    24% { opacity:1; }
    30% { opacity:0; }
    100% { opacity:0;}
}

您的意思是，有一个从0到1的过渡需要周期的6%，周期为18%(24-6)，其中不透明度=1，另一个从1到0的过渡用于另外6%。

设置这种转换的一种方法是，一个元素的转换"入"与前一个元素的转换"出"重叠。

在这种情况下，对于10个图像，将有10个全可见性阶段和10个过渡。 因此，两者相加的时间将是10%(100%/10)。您现在可以指定这10%，因为您想要完全可见性和过渡。如果比率为1/3，如您的示例所示，则过渡图像的比率为2.5%，静止图像的比率为7.5%。

@-webkit-keyframes anim_slides {
    0% { opacity:0; }
    2.5% { opacity:1; }
    10% { opacity:1; }
    12.5% { opacity:0; }
}

应该可以了。

这篇关于计算CSS3幻灯片中10个或更多图像的百分比的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！