Html 纯文本CSS幻灯片_Html_Css_Animation_Slideshow_Css Animations

Html 纯文本CSS幻灯片

html css animation

Html 纯文本CSS幻灯片,html,css,animation,slideshow,css-animations,Html,Css,Animation,Slideshow,Css Animations,我正在尝试为文本内容创建一个仅CSS的幻灯片我有这个HTML/CSS： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CSS text slideshow</title> <style> #slideshow { positio

我正在尝试为文本内容创建一个仅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>


CSS文本幻灯片
#幻灯片放映
{
位置：相对位置；
宽度：500px；
高度：300px；
}
.项目
{
位置：绝对位置；
最大宽度：500px；
不透明度：0；
}
.项目：第n个孩子（1）
{
-webkit动画：crossfade 48s 30s无限；
动画：crossfade 48s 30s无限；
}
.项目：第n个孩子（2）
{
-webkit动画：crossfade 48s 24s无限；
动画：crossfade 48s 24s无限；
}
.项目：第n个孩子（3）
{
-webkit动画：crossfade 48s 18s无限；
动画：crossfade 48s 18s无限；
}
.项目：第n个孩子（4）
{
-webkit动画：crossfade 48s 12s无限；
动画：crossfade 48s 12s无限；
}
.项目：第n个孩子（5）
{
-webkit动画：crossfade 48s 6s无限；
动画：crossfade 48s 6s无限；
}
.项目：第n个孩子（6）
{
-webkit动画：crossfade 48s 0s无限；
动画：crossfade 480s无限；
}
@关键帧交叉淡入淡出
{
0%
{
不透明度：1；
}
10.5%
{
不透明度：1；
}
12.5%
{
不透明度：0；
}
98%
{
不透明度：0；
}
100%
{
不透明度：1；
}
}
一个
两个
三
四
五
六

问题是幻灯片放映永远不会开始。第n个子选择器已正确应用于所有

项

s，但它们保持在

不透明度：0

如何让幻灯片自动启动

编辑：这似乎在Firefox中起作用，但在Chrome或Safari中不起作用。

将

-webkit-

前缀添加到

关键帧中，如下所示
@-webkit-keyframes {
 /* rest other code goes here */
}

我将您的全部代码复制到JSBin，幻灯片正在运行。。你还有什么问题？@RohitKumar我在Chrome或Safari的JSBin上没有看到任何东西。我在我的mozilla firefox上看到，计数器运行得像-六，五，四。。。褪色effects@RohitKumarFirefox也适用于我，我想是因为它支持不带前缀的animation
属性。我假设IE也可以工作，因为它也支持这个属性（我只有OSX所以不能检查）。然而，Chrome和Safari不起作用。它们都需要-webkit-
前缀。您是否也在关键帧中添加了-webkit-前缀？？在您的原始代码中？这就是为什么它在chrome中不起作用。。