CSS3降雪动画禁用内部链接

Question

我想通过使用CSS3使用降雪动画。但是，当我使用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;} 
} 

Answer 1

如果您设置一个元素的指针事件的CSS：没有，也不会追上它的任何点击可言，而只是让事件告吹到它下面的元素。需要使用'指针事件：无';' 整个这样的代码：

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

Answer 2

这是一个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; 
}