CSS淡入淡出幻灯片初始图像卡住

问题描述 投票：0回答：1

我从here中获取了代码，并对其进行了更改以进行幻灯片显示。在我的幻灯片中，它完全淡入和淡出每个图像。

我的问题是，一开始所有PNG图像都堆叠在一起。我在原始项目上有一个模式回落。而且我只需要使用HTML和CSS3，就像已经在这里一样。我正在为Confluence创建幻灯片，只能在“ body”标签中进行。

感谢任何见解。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<!--

For "n" images You must define:
a=presentation time for one image
b=duration for cross fading
Total animation-duration is of course t=(a+b)*n

animation-delay = t/n or = a+b

Percentage for keyframes:

0%
a/t*100%
(a+b)/t*100% = 1/n*100%
100%-(b/t*100%)
100%
-->



<body>
    <style>

        @-webkit-keyframes slideshowFadeInOut {
            0% {
                opacity: 1;
            }

            10.4% {
                opacity: 1;
            }

            12.5% {
                opacity: 0;
            }

            98% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @-moz-keyframes slideshowFadeInOut {
            0% {
                opacity: 1;
            }

            10.4% {
                opacity: 1;
            }

            12.5% {
                opacity: 0;
            }

            98% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @-o-keyframes slideshowFadeInOut {
            0% {
                opacity: 1;
            }

            10.4% {
                opacity: 1;
            }

            12.5% {
                opacity: 0;
            }

            98% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        @keyframes slideshowFadeInOut {
            0% {
                opacity: 1;
            }

            10.4% {
                opacity: 1;
            }

            12.5% {
                opacity: 0;
            }

            98% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

        #overview-slideshow {
            position: relative;
            height: 300px;
            width: 300px;
        }

        #overview-slideshow img {
            position: absolute;
            left: 0;
        }

        #overview-slideshow img {
            --duration: 24s;
            -webkit-animation-name: slideshowFadeInOut;
            -webkit-animation-timing-function: ease-in-out;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-duration: var(--duration);

            -moz-animation-name: slideshowFadeInOut;
            -moz-animation-timing-function: ease-in-out;
            -moz-animation-iteration-count: infinite;
            -moz-animation-duration: var(--duration);

            -o-animation-name: slideshowFadeInOut;
            -o-animation-timing-function: ease-in-out;
            -o-animation-iteration-count: infinite;
            -o-animation-duration: var(--duration);

            animation-name: slideshowFadeInOut;
            animation-timing-function: ease-in-out;
            animation-iteration-count: infinite;
            animation-duration: var(--duration);
        }

        #overview-slideshow img:nth-of-type(1) {
            --delay: 21s;
            -webkit-animation-delay: var(--delay);
            -moz-animation-delay: var(--delay);
            -o-animation-delay: var(--delay);
            animation-delay: var(--delay);
        }

        #overview-slideshow img:nth-of-type(2) {
            --delay: 18s;
            -webkit-animation-delay: var(--delay);
            -moz-animation-delay: var(--delay);
            -o-animation-delay: var(--delay);
            animation-delay: var(--delay);
        }

        #overview-slideshow img:nth-of-type(3) {
            --delay: 15s;
            -webkit-animation-delay: var(--delay);
            -moz-animation-delay: var(--delay);
            -o-animation-delay: var(--delay);
            animation-delay: var(--delay);
        }

        #overview-slideshow img:nth-of-type(4) {
            --delay: 12s;
            -webkit-animation-delay: var(--delay);
            -moz-animation-delay: var(--delay);
            -o-animation-delay: var(--delay);
            animation-delay: var(--delay);
        }
        
        #overview-slideshow img:nth-of-type(5) {
            --delay: 9s;
            -webkit-animation-delay: var(--delay);
            -moz-animation-delay: var(--delay);
            -o-animation-delay: var(--delay);
            animation-delay: var(--delay);
        }
        
        #overview-slideshow img:nth-of-type(6) {
            --delay: 6s;
            -webkit-animation-delay: var(--delay);
            -moz-animation-delay: var(--delay);
            -o-animation-delay: var(--delay);
            animation-delay: var(--delay);
        }
        
        #overview-slideshow img:nth-of-type(7) {
            --delay: 3s;
            -webkit-animation-delay: var(--delay);
            -moz-animation-delay: var(--delay);
            -o-animation-delay: var(--delay);
            animation-delay: var(--delay);
        }
        
        #overview-slideshow img:nth-of-type(8) {
            --delay: 0s;
            -webkit-animation-delay: var(--delay);
            -moz-animation-delay: var(--delay);
            -o-animation-delay: var(--delay);
            animation-delay: var(--delay);
        }

    </style>


    <div id="overview-slideshow" class="shadow">
        <img src="blank.png">
        <img src="Iso.png">
        <img src="blank.png">
        <img src="Top.png">
        <img src="blank.png">
        <img src="Front.png">
        <img src="blank.png">
        <img src="Side.png">
    </div>
</body>

</html>
html css animation slideshow timing
1个回答
0
投票

我使用了与您相同的资源来创建幻灯片。对我来说，幻灯片开始播放之前，图像会快速连续加载。这就是你正在发生的事情吗？

我的解决方案是为每个图像赋予不同的z-index，以便它们在第一个图像之后加载：

img:nth-of-type(1) {
    z-index: 3;
}

img:nth-of-type(2) {
    z-index: 2;
}
img:nth-of-type(3) {
    z-index: 1;
}

我希望这会有所帮助。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.