Question

我正在尝试为文本内容创建一个仅限CSS的幻灯片。

我有这个HTML / CSS：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS text slideshow</title>
        <style>
        #slideshow
        {
            position: relative;
            width: 500px;
            height: 300px;
        }
        .item
        {
            position: absolute;
            max-width: 500px;
            opacity: 0;
        }
        .item:nth-child(1)
        {
            -webkit-animation: crossfade 48s 30s infinite;
            animation: crossfade 48s 30s infinite;
        }
        .item:nth-child(2)
        {
            -webkit-animation: crossfade 48s 24s infinite;
            animation: crossfade 48s 24s infinite;
        }
        .item:nth-child(3)
        {
            -webkit-animation: crossfade 48s 18s infinite;
            animation: crossfade 48s 18s infinite;
        }
        .item:nth-child(4)
        {
            -webkit-animation: crossfade 48s 12s infinite;
            animation: crossfade 48s 12s infinite;
        }
        .item:nth-child(5)
        {
            -webkit-animation: crossfade 48s 6s infinite;
            animation: crossfade 48s 6s infinite;
        }
        .item:nth-child(6)
        {
            -webkit-animation: crossfade 48s 0s infinite;
            animation: crossfade 48s 0s infinite;
        }
        @keyframes crossfade
        {
            0%
            {
                opacity: 1;
            }
            10.5%
            {
                opacity: 1;
            }
            12.5%
            {
                opacity: 0;
            }
            98%
            {
                opacity: 0;
            }
            100%
            {
                opacity: 1;
            }
        }
        </style>
    </head>
    <body>
        <div id='slideshow'>
            <div class='item'>
                One
            </div>
            <div class='item'>
                Two
            </div>
            <div class='item'>
                Three
            </div>
            <div class='item'>
                Four
            </div>
            <div class='item'>
                Five
            </div>
            <div class='item'>
                Six
            </div>
        </div>
    </body>
</html>

问题是幻灯片永远不会开始。第n个子选择器已正确应用于所有item，但它们仍保留在opacity: 0。

如何让幻灯片自动启动？

编辑：这似乎适用于Firefox，但不适用于Chrome或Safari。

Answer 1

将-webkit-前缀添加到keyframes，就像这样

@-webkit-keyframes {
 /* rest other code goes here */
}

纯文字CSS幻灯片

1 个答案: