0

我想通过 CSS3 来使用 Snow Fall Animation。但是当我使用 css 代码时，我的网站大部分内部链接都被禁用了。我也不能从网站上选择任何内容。

这是我的代码：

body { background-color:#333; }
#snow{
    background: none;
    font-family: Androgyne;
    background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index:1;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-moz-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}
@-webkit-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
@-ms-keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}
4

2 回答 2

1

如果您已将元素的 CSS 设置为 pointer-events: none，则它根本不会捕捉到任何点击，而是让事件落到它下面的元素。需要使用“指针事件：无；” 整个代码是这样的：

    #snow{
    background-image: url('/assets/images/s1.png'),
            url('/assets/images/s2.png'),
            url('/assets/images/s3.png');
    height: 100%;
        pointer-events: none;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index:1;
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}
/*Keyframes*/
@keyframes snow { 0% { background-position: 500px 0px, 120px 0px, -100px 0px; }
       10% { background-position: 500px 100px, 120px 40px, -100px 30px; }
       20% { background-position: 500px 200px, 120px 80px, -100px 60px; }
       30% { background-position: 500px 300px, 120px 120px, -100px 90px; }
       40% { background-position: 500px 400px, 120px 160px, -100px 120px; }
       50% { background-position: 500px 500px, 120px 200px, -100px 150px; }
       60% { background-position: 500px 600px, 120px 240px, -100px 180px; }
       70% { background-position: 500px 700px, 120px 280px, -100px 210px; }
       80% { background-position: 500px 800px, 120px 320px, -100px 240px; }
       90% { background-position: 500px 900px, 120px 360px, -100px 270px; }
       100% { background-position: 500px 1000px, 120px 400px, -100px 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;}
}

@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
于 2016-12-07T10:59:58.130 回答
0

这是一个 z-index 问题。您可以发布您的 html 来完成您的答案吗？

如果页面中没有任何容器或任何不同的背景，则可以将降雪效果放在您body的background-image.

我是说：

body{
     background-color: #333;
     background-image: url('http://www.wearewebstars.dk/codepen/img/s1.png'), url('http://www.wearewebstars.dk/codepen/img//s2.png'), url('http://www.wearewebstars.dk/codepen/img//s3.png');
    -webkit-animation: snow 10s linear infinite;
    -moz-animation: snow 10s linear infinite;
    -ms-animation: snow 10s linear infinite;
    animation: snow 10s linear infinite;
}
于 2016-12-06T16:32:11.343 回答