CSS背景幻燈片動畫

HTML：

<div> 
    <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> 
    </ul> 
    <div class="container"></div> 
</div>

在本演示中，你可以看到，我的內容部分也被褪去。我試着用很多的選擇，但我沒有得到解決

問題：

我的內容股利是在紅色必須保持所有的時間，只有背景應該動畫。有人能幫我嗎？

來源

2015-06-17 G.L.P

ul{ 
 
    list-style-type:none; 
 
} 
 
/* /background rotator */ 
 
.cb-slideshow li:nth-child(1)>span { 
 
    background-image: url(http://www.stockazoo.com/uploads/3/5/4/5/3545172/8932442_orig.jpg); 
 
} 
 
.cb-slideshow li:nth-child(2)>span { 
 
    background-image: url(http://www.stockazoo.com/uploads/3/5/4/5/3545172/9899271_orig.jpg); 
 
    -webkit-animation-delay: 6s; 
 
    -moz-animation-delay: 6s; 
 
    -o-animation-delay: 6s; 
 
    -ms-animation-delay: 6s; 
 
    animation-delay: 6s; 
 
} 
 
.cb-slideshow li:nth-child(3)>span { 
 
    background-image: url(http://www.stockazoo.com/uploads/3/5/4/5/3545172/8932442_orig.jpg); 
 
    -webkit-animation-delay: 12s; 
 
    -moz-animation-delay: 12s; 
 
    -o-animation-delay: 12s; 
 
    -ms-animation-delay: 12s; 
 
    animation-delay: 12s; 
 
} 
 
.cb-slideshow li:nth-child(4)>span { 
 
    background-image: url(http://www.stockazoo.com/uploads/3/5/4/5/3545172/9899271_orig.jpg); 
 
    -webkit-animation-delay: 18s; 
 
    -moz-animation-delay: 18s; 
 
    -o-animation-delay: 18s; 
 
    -ms-animation-delay: 18s; 
 
    animation-delay: 18s; 
 
} 
 
.cb-slideshow li:nth-child(5)>span { 
 
    background-image: url(http://www.stockazoo.com/uploads/3/5/4/5/3545172/8932442_orig.jpg); 
 
    -webkit-animation-delay: 24s; 
 
    -moz-animation-delay: 24s; 
 
    -o-animation-delay: 24s; 
 
    -ms-animation-delay: 24s; 
 
    animation-delay: 24s; 
 
} 
 
.cb-slideshow, .cb-slideshow:after { 
 
    position: fixed; 
 
    width: 100%; 
 
    height: 100%; 
 
    top: 0px; 
 
    left: 0px; 
 
    z-index: -1; 
 
} 
 
.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; 
 
    -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 div { 
 
    z-index: 1000; 
 
    position: absolute; 
 
    bottom: 30px; 
 
    left: 0px; 
 
    width: 100%; 
 
    text-align: center; 
 
    opacity: 0; 
 
    -webkit-animation: titleAnimation 36s linear infinite 0s; 
 
    -moz-animation: titleAnimation 36s linear infinite 0s; 
 
    -o-animation: titleAnimation 36s linear infinite 0s; 
 
    -ms-animation: titleAnimation 36s linear infinite 0s; 
 
    animation: titleAnimation 36s linear infinite 0s; 
 
} 
 
.cb-slideshow li div h3 { 
 
    font-family:'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif; 
 
    font-size: 240px; 
 
    padding: 0; 
 
    line-height: 200px; 
 
    color: rgba(169, 3, 41, 0.8); 
 
} 
 
.cb-slideshow li:nth-child(2) div { 
 
    -webkit-animation-delay: 6s; 
 
    -moz-animation-delay: 6s; 
 
    -o-animation-delay: 6s; 
 
    -ms-animation-delay: 6s; 
 
    animation-delay: 6s; 
 
} 
 
.cb-slideshow li:nth-child(3) div { 
 
    -webkit-animation-delay: 12s; 
 
    -moz-animation-delay: 12s; 
 
    -o-animation-delay: 12s; 
 
    -ms-animation-delay: 12s; 
 
    animation-delay: 12s; 
 
} 
 
.cb-slideshow li:nth-child(4) div { 
 
    -webkit-animation-delay: 18s; 
 
    -moz-animation-delay: 18s; 
 
    -o-animation-delay: 18s; 
 
    -ms-animation-delay: 18s; 
 
    animation-delay: 18s; 
 
} 
 
.cb-slideshow li:nth-child(5) div { 
 
    -webkit-animation-delay: 24s; 
 
    -moz-animation-delay: 24s; 
 
    -o-animation-delay: 24s; 
 
    -ms-animation-delay: 24s; 
 
    animation-delay: 24s; 
 
} 
 
.cb-slideshow li:nth-child(6) div { 
 
    -webkit-animation-delay: 30s; 
 
    -moz-animation-delay: 30s; 
 
    -o-animation-delay: 30s; 
 
    -ms-animation-delay: 30s; 
 
    animation-delay: 30s; 
 
} 
 
/* Animation for the slideshow images */ 
 
@-webkit-keyframes imageAnimation { 
 
    0% { 
 
     opacity: 0; 
 
     -webkit-animation-timing-function: ease-in; 
 
    } 
 
    8% { 
 
     opacity: 1; 
 
     -webkit-transform: scale(1.05); 
 
     -webkit-animation-timing-function: ease-out; 
 
    } 
 
    17% { 
 
     opacity: 1; 
 
     -webkit-transform: scale(1.1); 
 
    } 
 
    25% { 
 
     opacity: 0; 
 
     -webkit-transform: scale(1.1); 
 
    } 
 
    100% { 
 
     opacity: 0 
 
    } 
 
} 
 
@-moz-keyframes imageAnimation { 
 
    0% { 
 
     opacity: 0; 
 
     -moz-animation-timing-function: ease-in; 
 
    } 
 
    8% { 
 
     opacity: 1; 
 
     -moz-transform: scale(1.05); 
 
     -moz-animation-timing-function: ease-out; 
 
    } 
 
    17% { 
 
     opacity: 1; 
 
     -moz-transform: scale(1.1); 
 
    } 
 
    25% { 
 
     opacity: 0; 
 
     -moz-transform: scale(1.1); 
 
    } 
 
    100% { 
 
     opacity: 0 
 
    } 
 
} 
 
@-o-keyframes imageAnimation { 
 
    0% { 
 
     opacity: 0; 
 
     -o-animation-timing-function: ease-in; 
 
    } 
 
    8% { 
 
     opacity: 1; 
 
     -o-transform: scale(1.05); 
 
     -o-animation-timing-function: ease-out; 
 
    } 
 
    17% { 
 
     opacity: 1; 
 
     -o-transform: scale(1.1); 
 
    } 
 
    25% { 
 
     opacity: 0; 
 
     -o-transform: scale(1.1); 
 
    } 
 
    100% { 
 
     opacity: 0 
 
    } 
 
} 
 
@-ms-keyframes imageAnimation { 
 
    0% { 
 
     opacity: 0; 
 
     -ms-animation-timing-function: ease-in; 
 
    } 
 
    8% { 
 
     opacity: 1; 
 
     -ms-transform: scale(1.05); 
 
     -ms-animation-timing-function: ease-out; 
 
    } 
 
    17% { 
 
     opacity: 1; 
 
     -ms-transform: scale(1.1); 
 
    } 
 
    25% { 
 
     opacity: 0; 
 
     -ms-transform: scale(1.1); 
 
    } 
 
    100% { 
 
     opacity: 0 
 
    } 
 
} 
 
@keyframes imageAnimation { 
 
    0% { 
 
     opacity: 0; 
 
     animation-timing-function: ease-in; 
 
    } 
 
    8% { 
 
     opacity: 1; 
 
     transform: scale(1.05); 
 
     animation-timing-function: ease-out; 
 
    } 
 
    17% { 
 
     opacity: 1; 
 
     transform: scale(1.1); 
 
    } 
 
    25% { 
 
     opacity: 0; 
 
     transform: scale(1.1); 
 
    } 
 
    100% { 
 
     opacity: 0 
 
    } 
 
} 
 
/* Animation for the title */ 
 
@-webkit-keyframes titleAnimation { 
 
    0% { 
 
     opacity: 0; 
 
     -webkit-transform: translateY(200px); 
 
    } 
 
    8% { 
 
     opacity: 1; 
 
     -webkit-transform: translateY(0px); 
 
    } 
 
    17% { 
 
     opacity: 1; 
 
     -webkit-transform: scale(1); 
 
    } 
 
    19% { 
 
     opacity: 0 
 
    } 
 
    25% { 
 
     opacity: 0; 
 
     -webkit-transform: scale(10); 
 
    } 
 
    100% { 
 
     opacity: 0 
 
    } 
 
} 
 
@-moz-keyframes titleAnimation { 
 
    0% { 
 
     opacity: 0; 
 
     -moz-transform: translateY(200px); 
 
    } 
 
    8% { 
 
     opacity: 1; 
 
     -moz-transform: translateY(0px); 
 
    } 
 
    17% { 
 
     opacity: 1; 
 
     -moz-transform: scale(1); 
 
    } 
 
    19% { 
 
     opacity: 0 
 
    } 
 
    25% { 
 
     opacity: 0; 
 
     -moz-transform: scale(10); 
 
    } 
 
    100% { 
 
     opacity: 0 
 
    } 
 
} 
 
@-o-keyframes titleAnimation { 
 
    0% { 
 
     opacity: 0; 
 
     -o-transform: translateY(200px); 
 
    } 
 
    8% { 
 
     opacity: 1; 
 
     -o-transform: translateY(0px); 
 
    } 
 
    17% { 
 
     opacity: 1; 
 
     -o-transform: scale(1); 
 
    } 
 
    19% { 
 
     opacity: 0 
 
    } 
 
    25% { 
 
     opacity: 0; 
 
     -o-transform: scale(10); 
 
    } 
 
    100% { 
 
     opacity: 0 
 
    } 
 
} 
 
@-ms-keyframes titleAnimation { 
 
    0% { 
 
     opacity: 0; 
 
     -ms-transform: translateY(200px); 
 
    } 
 
    8% { 
 
     opacity: 1; 
 
     -ms-transform: translateY(0px); 
 
    } 
 
    17% { 
 
     opacity: 1; 
 
     -ms-transform: scale(1); 
 
    } 
 
    19% { 
 
     opacity: 0 
 
    } 
 
    25% { 
 
     opacity: 0; 
 
     -webkit-transform: scale(10); 
 
    } 
 
    100% { 
 
     opacity: 0 
 
    } 
 
} 
 
@keyframes titleAnimation { 
 
    0% { 
 
     opacity: 0; 
 
     transform: translateY(200px); 
 
    } 
 
    8% { 
 
     opacity: 1; 
 
     transform: translateY(0px); 
 
    } 
 
    17% { 
 
     opacity: 1; 
 
     transform: scale(1); 
 
    } 
 
    19% { 
 
     opacity: 0 
 
    } 
 
    25% { 
 
     opacity: 0; 
 
     transform: scale(10); 
 
    } 
 
    100% { 
 
     opacity: 0 
 
    } 
 
} 
 
/* Show at least something when animations not supported */ 
 
.no-cssanimations .cb-slideshow li span { 
 
    opacity: 1; 
 
} 
 
@media screen and (max-width: 1140px) { 
 
    .cb-slideshow li div h3 { 
 
     font-size: 100px 
 
    } 
 
} 
 
@media screen and (max-width: 600px) { 
 
    .cb-slideshow li div h3 { 
 
     font-size: 50px 
 
    } 
 
} 
 
/* /background rotator */ 
 
.container { 
 
    width:60%; 
 
    margin:0 auto; 
 
    min-height:500px; 
 
    background:red; 
 
    z-index:999; 
 
}

<div> 
 
    <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> 
 
    </ul> 
 
    <div class="container"></div> 
 
</div>

你想像這樣嗎？對不對？

來源

2015-06-17 10:21:59

檢查此行.cb-slideshow，.cb-slideshow：寫入後z-index：-1;在這個類 –

之後寫z-index：99;在.container類簡單:) –

k謝謝..沒有想過有關z-index是問題:) –

由於靜態位置，容器「隱藏」。快速修復：將其設置爲絕對。

.container { 
    width:60%; 
    margin:0 auto; 
    min-height:500px; 
    background:red; 
    z-index: 999; 
    position: absolute; 
}

（ü可能需要一些更多的位置屬性最終造型（頂部，左側...）

更新的解決方案：http://jsfiddle.net/n27rk6qu/2/

來源

2015-06-17 10:16:15

Th anks for your help :) upvoted –

CSS背景幻燈片動畫

回答

相關問題