CSS3 Snow Fall Animation 禁用内部链接

Posted 2023-02-19

【中文标题】CSS3 Snow Fall Animation 禁用内部链接

【英文标题】：CSS3 Snow Fall Animation Disable internal links

【发布时间】：2017-04-21 08:20:57

【问题描述】：

我想通过 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;
   

【问题讨论】：

就像 thejoin 在他们的回答中提到的那样，#snow 的 z-index 需要小于您希望能够与用户进行交互的任何内容的 z-index。

【参考方案1】：

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

【讨论】：

我在正文后使用 ''。我的页面中有很多容器。我在其他部分有一些背景图片。

【参考方案2】：

如果你将一个元素的 CSS 设置为 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;