CSS3 Snow Fall Animation内部リンクを無効にする

Question

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

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インデックスの問題です。 あなたの答えを完了するためだけにあなたの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; 
}