使用背景圖片並在其頂部應用CSS動畫

我創建了一個小提琴，但我不認爲它正確顯示。 http://jsfiddle.net/kVNQb/，但無論如何查看代碼可能都很有用。使用背景圖片並在其頂部應用CSS動畫

我使用一個CSS動畫從此站點http://cssdeck.com/labs/css3-snow

我想要做的是設置一個背景圖片，然後讓雪動畫在此之上建立的雪。此刻，我失去了動畫雪或背景圖像。

我需要創建一個ID並設置我想要的圖像作爲背景嗎？

HTML代碼

<body> 

    <div class="row"> 
     <div class="large-12 columns"> 
      <div id="container"> 
     </div> 
      </div> 

    </div> 

</body>

CSS代碼

/*Custom CSS styles being used on top of the standard Foundation 4 style sheet*/ 
fixed.body { 
background-image: url(http://s17.postimg.org/9htu61zjj/background.jpg); 
} 


* { 
    margin: 0; 
    padding: 0; 
} 

a { 
    color: white; 
    font-style: italic; 
} 

/*Keyframes*/ 

@keyframes snow { 
    0% { background-position: 0px 0px, 0px 0px, 0px 0px } 

    100% { background-position: 500px 1000px, 400px 400px, 300px 300px } 
} 

@-moz-keyframes snow { 
    0% { background-position: 0px 0px, 0px 0px, 0px 0px } 

    100% { background-position: 500px 1000px, 400px 400px, 300px 300px } 
} 

@-webkit-keyframes snow { 
    0% { background-position: 0px 0px, 0px 0px, 0px 0px } 

    50% { background-color: #b4cfe0 } 

    100% { 
     background-position: 500px 1000px, 400px 400px, 300px 300px; 
     background-color: #6b92b9; 
    } 
} 

@-ms-keyframes snow { 
    0% { background-position: 0px 0px, 0px 0px, 0px 0px } 

    100% { background-position: 500px 1000px, 400px 400px, 300px 300px } 
} 

/*body { 
    background-color: #6b92b9; 
    background-image: url('http://img138.imageshack.us/img138/5230/snowh.png'), url('http://img594.imageshack.us/img594/9146/snow3q.png'), url('http://img196.imageshack.us/img196/5065/snow2l.png'); 
    -webkit-animation: snow 20s linear infinite; 
    -moz-animation: snow 20s linear infinite; 
    -ms-animation: snow 20s linear infinite; 
    animation: snow 20s linear infinite; 
}*/ 

#container { 
    width: 800px; 
    margin: 200px auto; 
    text-align: center; 
    color: white; 
    font: 100px/1 'Spirax', cursive; 
    text-shadow: 0px 0px 4px rgba(0,0,0, 0.5); 
} 

#container p { font: 12px/1.5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif }

來源

2013-11-09 Dano007

看起來在這裏很好：http://www.liveweave.com/vxMq6X – silicakes

在這種情況下，關鍵是要設置背景色到透明兩個div和在動畫幀。小提琴：http://jsfiddle.net/f92gB/

HTML：

<body> 
    <div id="container"></div> 
</body>

CSS：

* { 
    margin: 0; 
    padding: 0; 
} 

a { 
    color: white; 
    font-style: italic; 
} 

/*Keyframes*/ 

@keyframes snow { 
    0% { background-position: 0px 0px, 0px 0px, 0px 0px } 

    100% { background-position: 500px 1000px, 400px 400px, 300px 300px } 
} 

@-moz-keyframes snow { 
    0% { background-position: 0px 0px, 0px 0px, 0px 0px } 

    100% { background-position: 500px 1000px, 400px 400px, 300px 300px } 
} 

@-webkit-keyframes snow { 
    0% { background-position: 0px 0px, 0px 0px, 0px 0px } 

    50% { background-color: transparent } 

    100% { 
     background-position: 500px 1000px, 400px 400px, 300px 300px; 
     background-color: transparent; 
    } 
} 

@-ms-keyframes snow { 
    0% { background-position: 0px 0px, 0px 0px, 0px 0px } 

    100% { background-position: 500px 1000px, 400px 400px, 300px 300px } 
} 

body { 
    background-image: url("http://s17.postimg.org/9htu61zjj/background.jpg"); 
    background-size: cover; 
    height: 500px; 

} 

#container { 
    height:500px; 
    margin: 0; 
    text-align: center; 
    color: white; 
    font: 100px/1 'Spirax', cursive; 
    text-shadow: 0px 0px 4px rgba(0,0,0, 0.5); 
    background-color: transparent; 
    background-image: url('http://img138.imageshack.us/img138/5230/snowh.png'), url('http://img594.imageshack.us/img594/9146/snow3q.png'), url('http://img196.imageshack.us/img196/5065/snow2l.png'); 
    -webkit-animation: snow 20s linear infinite; 
    -moz-animation: snow 20s linear infinite; 
    -ms-animation: snow 20s linear infinite; 
    animation: snow 20s linear infinite; 
}

來源

2013-11-09 20:03:56

你是一個傳奇人物！非常感謝！ – Dano007

出於興趣是否有可能採取背景圖像並將其作爲標準圖像放在html中？目前的雪花效果僅限於div的限制，它在 – Dano007

在這種特殊情況下，它無濟於事。但是，您可以將div設置爲您需要的大小。我確信有一些CSS技巧可以實現這一點，但通常對於一個js smidgen來說並不痛苦：http://stackoverflow.com/questions/9214040/how-to-properly-set-the -100-DIV-高度來匹配文檔窗口高度 –

你可以使用這個jQuery插件，在您的網頁設置一個完整和響應背景圖片，只要按照這個鏈接的說明。

http://johnpatrickgiven.com/jquery/background-resize/

來源

2013-11-09 19:38:35

意志，不是仍然拿在路上雪效應？目前看來，通過在CSS中設置一個背景img不可能實現CSS雪。或者這是否避免將其添加到身體？謝謝 – Dano007

使用背景圖片並在其頂部應用CSS動畫

回答

相關問題