CSS3 Snow Fall Animation Désactiver les liens internes

Question

Je veux utiliser Snow Fall Animation en utilisant CSS3. Mais quand j'utilise le code CSS, mes sites la plupart des liens internes sont désactivés. Aussi, je ne peux pas sélectionner de contenu sur le site.

ici mon code:

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

Si vous avez défini le CSS d'un élément à pointer-events: aucun, il ne sera pas attraper tout clic sur du tout, mais au lieu de simplement laisser tomber l'événement par à l'élément ci-dessous. Besoin d'utiliser 'pointer-events: none;' ensemble du code comme ceci:

#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

C'est un problème z-index. Pouvez-vous poster votre code HTML juste pour compléter votre réponse?

Si vous n'avez pas de conteneur ou d'arrière-plan différent dans les pages, vous pouvez placer l'effet de neige sur votre body, comme background-image.

Je veux dire:

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