0

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

2 に答える 2

1

要素の CSS を pointer-events: 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;}
}
于 2016-12-07T10:59:58.130 に答える