html - 在一些背景图像上使用 css3 的降雪效果

标签 html css background snowfall

我使用 CSS3 开发了具有降雪效果的网页,并且运行良好。 引用此链接:-
http://designshack.net/articles/css/make-it-snow-on-your-website-with-css-keyframe-animations/

但是我无法使用预定义的背景来做到这一点。 我有一张背景图片,我想在该图片上下雪。 我不确定我应该如何实现这一目标。尝试了很多。 任何人都可以分享他/她对此的想法吗?

    body {
    background: url('configAssets/images/img.png'), url('configAssets/images/snow.png'), 
   url('configAssets/images/snow3.png'), url('configAssets/images/snow2.png');
}

@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;}
 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;}
}

.snow {
    -webkit-animation: snow 40s linear infinite;
    -moz-animation: snow 40s linear infinite;
    -ms-animation: snow 40s linear infinite;
    animation: snow 40s linear infinite;
}

最佳答案

您需要确保您的原始背景图像排在最后。参见 Stacking Order of Multiple Backgrounds

background-image: url('snow.png'), url('snow2.png'), url('snow3.png'),
 url('configAssets/images/img.png');
body {
    background-color: #6b92b9;
    background-image: url('snow.png'), url('snow2.png'), url('snow3.png'),url('configAssets/images/img.png');

    -webkit-animation: snow 20s linear infinite;
    -moz-animation: snow 20s linear infinite;
    -ms-animation: snow 20s linear infinite;
    animation: snow 20s linear infinite;
}

关于html - 在一些背景图像上使用 css3 的降雪效果,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27621042/

相关文章:

html - 如何显示固定宽度的居中背景

html - 如何反转使用 CSS 创建的五边形?

jQuery 在 50 个字符后的文本中添加一个 <br>

javascript - HTML 可编辑表 : Add new row including radio buttons

javascript - 根据变量值检查单选按钮

html - 无法找到删除线的样式

objective-c - 从后台调用应用程序时调用方法

可以创建详细的类 CSS 反射的 Javascript 库 :

javascript - 如何在给定 JavaScript 中的 Schläfli 符号的庞加莱圆盘上绘制双曲曲面分割?

objective-c - 如何在 Objective C 中为 Google Drive 服务使用后台队列