Question

我一直在关注如何使用css制作幻灯片的精彩教程：http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/comment-page-3/#comments

现在基本上所有写的都写在那里，但事情不会奏效。与我的代码和教程中的代码的唯一区别在于我删除了所有文本，因为我只需要两张图片。

这是小提琴：http://jsfiddle.net/kyzyd/1/。我真的不明白什么是错的。

这个想法很简单;我有一小段html：

<div class="container">
    <ul class="cb-slideshow">
    <li>
        <span>Image 01</span>
    </li>
    <li>
        <span>Image 02</span>
    </li>
    </ul>
</div>

我希望动画两个跨度的背景来互相交替;我是用CSS做的：

.container {
    width:500px;
    height:400px;
}
.cb-slideshow,
.cb-slideshow:after { 
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}
.cb-slideshow:after { 
    content: '';
}
.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 16s linear infinite 0s;
}
.cb-slideshow li:nth-child(1) span {
    background-image: url(image2); /*just a random name*/
}
.cb-slideshow li:nth-child(2) span {
    background-image: url(image1);
    animation-delay: 8s;
}
@keyframes imageAnimation {
    0% {
        opacity: 0;
        animation-timing-function: ease-in;
    }
    8% {
        opacity: 1;
        animation-timing-function: ease-out;
    }
    50% {
        opacity: 1
    }
    58% {
        opacity: 0
    }
    100% {
        opacity: 0
    }
}

我做错了什么？也许有一个最简单的方法来循环只有两个成像仪？干杯！

CSS cb-slideshow动画

0 个答案: