0

我已经使用 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;
}
4

1 回答 1

2

您需要确保您的原始背景图像是最后一行。请参阅多个背景的堆叠顺序

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;
}
于 2014-12-23T13:10:25.073 回答