Question

我正在使用一个非常棒的CSS3动画背景教程，可以找到here

唯一的问题是它不起作用。不幸的是，该教程只是一篇包含代码的博客文章，并且没有具体的名称，所以我一直无法找到对我的问题的支持。

它使用简单的html标记：

<ul class="cb-slideshow">
<li>
    <span>Image 01</span>
    <div>
        <h3></h3>
    </div>
</li>
<li>
<span>Image 02</span>
<div>
        <h3></h3>
    </div>
</li>
<li>
<span>Image 03</span>
<div>
        <h3></h3>
    </div>
</li>
<li>
<span>Image 04</span>
<div>
        <h3></h3>
    </div>
</li>
<li>
<span>Image 05</span>
<div>
        <h3></h3>
    </div>
</li>
<li>
<span>Image 06</span>
<div>
        <h3></h3>
    </div>
</li>
<li>
<span>Image 07</span>
<div>
        <h3></h3>
    </div>
</li>
<li>
<span>Image 08></span>
<div>
        <h3></h3>
    </div>
</li>

然后其余部分在CSS3中完成

    .cb-slideshow,
.cb-slideshow:after { 
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0; 
}

.cb-slideshow:after { 
    content: '';
    background: transparent url() 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;
    animation: imageAnimation 40s linear infinite 0s; 
}

.cb-slideshow li div { 
    z-index: 1000;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    -webkit-animation: titleAnimation 40s linear infinite 0s;
    -moz-animation: titleAnimation 40s linear infinite 0s;
    -o-animation: titleAnimation 40s linear infinite 0s;
    -ms-animation: titleAnimation 40s linear infinite 0s;
    animation: titleAnimation 40s linear infinite 0s; 
}
.cb-slideshow li div h3 { 
    font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
    font-size: 240px;
    padding: 0;
    line-height: 200px; 
}

.cb-slideshow li:nth-child(1) span { 
    background-image: url(../images/homepage/img01.jpg) 
}
.cb-slideshow li:nth-child(2) span { 
    background-image: url(../images/homepage/img02.jpg);
    animation-delay: 5s; 
    -webkit-animation-delay: 5s;
}
.cb-slideshow li:nth-child(3) span { 
    background-image: url(../images/homepage/img03.jpg);
    animation-delay: 10s; 
    -webkit-animation-delay: 10s;
}
.cb-slideshow li:nth-child(4) span { 
    background-image: url(../images/homepage/img04.jpg);
    animation-delay: 15s; 
    -webkit-animation-delay: 15s;
}
.cb-slideshow li:nth-child(5) span { 
    background-image: url(../images/homepage/img05.jpg);
    animation-delay: 20s; 
    -webkit-animation-delay: 20s;
}
.cb-slideshow li:nth-child(6) span { 
    background-image: url(../images/homepage/img06.jpg);
    animation-delay: 25s; 
    -webkit-animation-delay: 25s;
}

.cb-slideshow li:nth-child(7) span { 
    background-image: url(../images/homepage/img07.jpg);
    animation-delay: 30s; 
    -webkit-animation-delay: 30s;
}

.cb-slideshow li:nth-child(8) span { 
    background-image: url(../images/homepage/img08.jpg);
    animation-delay: 35s; 
    -webkit-animation-delay: 35s;
}

@keyframes imageAnimation { 
    0% { opacity: 0;
    animation-timing-function: ease-in; }
    8% { opacity: 1;
         animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

如果浏览器不支持CSS3动画，甚至还有备份：

.no-cssanimations .cb-slideshow li span{
opacity: 1;

}

这应该确保你不会得到一个空白页面，这就是我所拥有的。我重新检查了我的链接，几乎完全复制了该演示，但它没有显示在我的页面上。是否有人熟悉CSS3并对我的问题有什么想法？

Answer 1

也许可以通过添加webkit来解决问题

 @keyframes imageAnimation { 
     0% { opacity: 0;
     animation-timing-function: ease-in; }
     8% { opacity: 1;
          animation-timing-function: ease-out; }
     17% { opacity: 1 }
     25% { opacity: 0 }
     100% { opacity: 0 } so:  @-webkit-keyframes imageAnimation { 
     0% { opacity: 0;
     animation-timing-function: ease-in; }
     8% { opacity: 1;
          animation-timing-function: ease-out; }
     17% { opacity: 1 }
     25% { opacity: 0 }
     100% { opacity: 0 } @-moz-keyframes imageAnimation { 
     0% { opacity: 0;
     animation-timing-function: ease-in; }
     8% { opacity: 1;
          animation-timing-function: ease-out; }
     17% { opacity: 1 }
     25% { opacity: 0 }
     100% { opacity: 0 } @-o-keyframes imageAnimation { 
     0% { opacity: 0;
     animation-timing-function: ease-in; }
     8% { opacity: 1;
          animation-timing-function: ease-out; }
     17% { opacity: 1 }
     25% { opacity: 0 }
     100% { opacity: 0 }

解决CSS3动画背景教程

1 个答案: