Question

我正在使用我在某处找到的小型CSS3解决方案。它应该通过图像随机播放（不透明）。然而，img也褪色了。因为什么原因，没有触及页脚。

小提琴：jsfiddle

以下是相关代码：

的index.html

<body>
   <img src="images/logo.png" /> 
    <ul class="cb-slideshow">
            <li><span>Image 01</span></li>
            <li><span>Image 02</span></li>
            <li><span>Image 03</span></li>
            <li><span>Image 04</span></li>
            <li><span>Image 05</span></li>
            <li><span>Image 06</span></li>
    </ul>
    <footer>
    ....`

CSS

.cb-slideshow,
.cb-slideshow:after {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.cb-slideshow:after {
    z-index: 1;
    content: '';
    background: transparent url(../images/pattern.png) repeat top left;
}
.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;
    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 36s linear infinite 0s;
    -moz-animation: imageAnimation 36s linear infinite 0s;
    -o-animation: imageAnimation 36s linear infinite 0s;
    -ms-animation: imageAnimation 36s linear infinite 0s;
    animation: imageAnimation 36s linear infinite 0s;
}
    .cb-slideshow li:nth-child(1) span { background-image: url(../images/1.jpg) }
    .cb-slideshow li:nth-child(2) span {
    background-image: url(../images/2.jpg);
    -webkit-animation-delay: 6s;
    -moz-animation-delay: 6s;
    -o-animation-delay: 6s;
    -ms-animation-delay: 6s;
 ....

CSS3全屏幻灯片隐藏太多

0 个答案: