我使用 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/