如何使用CSS /全屏幻燈片獲取多個旋轉背景覆蓋

Question

我想要使用HTML和CSS的多個背景圖像（因爲這些是迄今爲止我學到的唯一語言）。

我最喜歡的背景封面是id="full-bg"。現在我如何在旋轉的同時旋轉多個背景封面照片（每改變5秒）。

Answer 1

試試這個JSfiddle

此代碼只使用CSS和旋轉槽添加的背景。

body{ 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-position: fixed; 
    animation-duration: 5s; 
    animation-name: fade-bg; 
    animation-delay: 0; 
    animation-iteration-count: infinite; 
    animation-direction: forward; 

} 

@keyframes fade-bg { 
    0% { 
     background-image: url('http://i.imgur.com/sRnvs0K.jpg'); 
    } 
    50% { 
     background-image: url('http://i.imgur.com/sRnvs0K.jpg'); 
    } 
    51% { 
     background-image: url('http://i.imgur.com/wL4RT1w.jpg'); 
    } 
    100% { 
     background-image: url('http://i.imgur.com/wL4RT1w.jpg'); 
    } 
} 

我希望這有助於！

Answer 2

這裏是一個跨瀏覽器的解決方案：

body{ 
     -webkit-animation: change 5s linear infinite; 
     -moz-animation: change 5s linear infinite; 
     -ms-animation: change 5s linear infinite; 
     -o-animation: change 5s linear infinite;  
     animation: change 5s linear infinite; 
    } 


    @-webkit-keyframes change 
    { 
     0% { background-image:url('your_first_img.jpeg'); } 
     100% {background-image:url('your_second_img.jpeg'); } 
    } 

    @-moz-keyframes change 
    { 
     0% { background-image:url('your_first_img.jpeg'); } 
     100% {background-image:url('your_second_img.jpeg'); } 
    } 

    @-ms-keyframes change 
    { 
     0% { background-image:url('your_first_img.jpeg'); } 
     100% {background-image:url('your_second_img.jpeg'); } 
    } 

    @-o-keyframes change 
    { 
     0% { background-image:url('your_first_img.jpeg'); } 
     100% {background-image:url('your_second_img.jpeg'); } 
    } 

    @keyframes change 
    { 
     0% { background-image:url('your_first_img.jpeg'); } 
     100% {background-image:url('your_second_img.jpeg'); } 
    }