CSS3 降雪动画禁用内部链接

Question

我想通过 CSS3 使用降雪动画。但是当我使用 css 代码时，我的网站的大部分内部链接都被禁用了。我也不能 select 来自网站的任何内容。

这是我的代码：

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

Answer 1

这是一个 z-index 问题。你能 post 你的 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;
}

Answer 2

如果您将某个元素的 CSS 设置为指针事件：none，它根本不会捕捉到任何点击，而是让事件落入它下面的元素。需要使用 '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;}
}

CSS3 降雪动画禁用内部链接

CSS3 Snow Fall Animation Disable internal links

html

css

animation

snowfall