Question

我开发了使用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;
}

Answer 1

您需要确保原始背景图像是最后一个。见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;
}

使用css3的降雪作用在一些背景图象

1 个答案: