css - 现有项目上的 CSS 动画？

Question

我为我的网站制作了一个主题（未公开），其中涉及 CSS3 动画。下雪了。它真可爱。但是我希望它出现在我现有的项目上。我试过玩 z-index 但这似乎不起作用。该页面临时托管在：http ://briandempsey.org.uk/mbxt/index.html

我不确定这是否可以做到，但我认为（也许错误地可以）

TL;DR：需要雪出现在文本和其他项目上。如何？

Answer 1

见这里：http: //jsfiddle.net/YzSS9/

HTML：（添加一个新元素）

<div id="happy-xmas"> 
  <h1>Merry Christmas from everyone at</h1> 
</div>
<div id="flakes"></div>

您的旧body定义现在将是薄片，减去背景颜色和相关动画，它们会留在身体上：

body{
    background-color: #6b92b9; 
    animation:bg 20s linear infinite;
}

@keyframes bg{
    from,to{background-color:#6b92b9;}
    50% {background-color:#b4cfe0;}
}

#flakes{
    height:100%;
    width:100%;
    top:0;
    position:absolute;
    ...
}